前言
在 vue 开发的过程中发现一个问题: 改变 vue.$data 中对象的属性, watch 是观测不到变化, 但其实对象的属性是有变化的这, 有点难以置信!
正文
- <template>
- <div>
- <dl>name: {{option.name}}</dl>
- <dl>age: {{option.age}}</dl>
- <dl>
- <button @click="updateAgeTo25">update age with 25</button>
- </dl>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- option: {
- name: "isaac",
- age: 24
- }
- }
- },
- watch: {
- option(val) {
- console.log(val)
- }
- },
- methods: {
- updateAgeTo25() {
- this.option.age = 25
- }
- }
- }
- </script>
如结果所示, option.age 已经更新, 但是 watch 中的 option 函数并没有被触发
vue 的 watch 钩子会那么鸡肋? 我是不信的了
深层 watch
- ...
- watch: {
- option: {
- handler(newVal) {
- console.log(newVal);
- },
- deep: true,
- immediate: true
- }
- },
- ...
需要深层 watch 就需要开启 deep 属性
如结果所示
另外, 你会发现, 在 age 没有变化前也是有打印出 option, 这是因为开启 immediate 属性, 设定为 true,
该回调将会在侦听开始之后被立即调用
来源: http://www.jb51.net/article/134709.htm