一、监听数组

1.watch能监听到数组的push的改变,例如

data () {

return {

demo: [1,2]

}

},

mounted (){

window.myVue = this

},

watch: {

demo(val){

console.log(val)

}

},

myVue.demo.push(3) //[1,2,3]

2.watch 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:myVue.demo[1] = 5

当你修改数组的长度时,例如:myVue.demo.length = 2

这时候你可以删除原有键,再 $set 一个新的,这样就可以触发watch

myVue.$set(myVue.demo,0,8) // [8,2,3]

3.更复杂一点,你想对数组嵌套对象进行监听的时候,这时就需要深度监听

data () {

return {

demo:[

{

name:'张三',

age:18

},

{

name:'李四',

age:20

}

]

}

},

mounted (){

window.myVue = this

},

watch: {

demo: {

handler (val) {

console.log(val)

},

// 这里是关键,代表递归监听 demo 的变化

deep: true

}

},

myVue.demo[0].age = 30 //[{name:'张三',age:30},{name:'李四',age:20}]

二、监听对象

1.可以类似上面数组的第3点

2.可以直接监听对象中的值

data () {

return {

demo:{

name: '张三',

child: {

name: '李四',

age: 20

}

}

}

},

mounted (){

window.myVue = this

},

watch: {

'demo.child': {

handler: function (val) {

console.log(val)

},

deep: true

},

// 或者

'demo.name' (val) {

console.log(val)

}

},

myVue.demo.name = '王二' //王二

myVue.demo.age = '80' //{name:'李四',age:80}

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐