Vue的计算属性computed和监听属性watch

Vue的计算属性computed

定义
通过已有属性计算生成一个新的组合属性。
原理
底层借助了Object.defineproperty方法提供的getter和setter来实现。
性质
计算属性的代码内容是方法，但在Vue中它是属于Vue的一个属性。

计算属性大多数情况下是不会对其修改的,所以只考虑读取不考虑更改时set方法可以不写,进而只有get方法,这时的计算属性就可以进行简写

监听属性watch

监听属性watch
1 当被监听的属性发生变化时 回调函数自动调用 进行相关的操作
2 监听的属性必须存在才能够进行监听
3 监听两种写法
(1) new Vue时直接书写watch配置
(2) 通过(vue实例名.$watch{(}^{\prime }监听的属性{名}^{\prime })此处实例名为vm,注意,此处括号里的属性名需要加引号)vm.$watch(‘监听的属性名’)

运行到浏览器:

点击’ 改变日期 按钮观察控制台变化

immediate属性控制监听中的handler是否在初始化就会执行,默认为false,如果更改为true,则handler在vue实例初始化时就会执行

此处旧值处为undefined,因为初始化时就会加载,所以直接将原有值当做新值,原有的值此处当做不存在处理

深度监视

当属性值中还有嵌套的属性值时,此时还可以监听吗? 下面来试试



此时我们点击x++按钮和y++按钮更改x和y的值,因为上面定义时,x和y是num的属性,我们更改x和y观察num有没有被监听到更改:

此时num内部属性虽然更改了,但是vue却没有监听到num的更改,
此时就需要在监听中书写下一层级的监听

此时再在页面中更改x和y的值

此处可以直接这样写:


深度监听:
(1) vue中的watch默认不检测对象内部值得改变(只监听一层)
(2) 配置deep:true 可以开启检测对象内部值得改变(多层)
(3) vue自身可以监听对象内部值得改变 但是vue提供的watch默认不可以
(4) 使用watch时根据数据的具体结构 决定是否采用深度监听

监听简写:
当我们要监听的数据只需要handler配置时,可以进行监听的简写:

初始化实例后的简写方式:

computed和watch区别:
1 computed能完成的功能 watch都可以完成
2 watch能完成的功能 computed不一定可以完成 比如 watch可以进行异步操作(如定时操作)
两个重要小原则:
1 所有被vue管理的函数 最好写成普通函数 这样this的指向才会是vue实例或组件实例对象
2 所有不被vue管理的函数(定时器的回调函数 ajax的回调函数 Promise的回调函数) 最好写成箭头函数=>(),这样this的指向才是vue实例或组件实例对象