后面两篇介绍了computed和watch的根本应用
- watch篇
- computed篇
两者的区别，持续通过代码实现的形式具体去理解
html
<li>最开始的value值：{{ name }}</li><li>computed计算后的值：{{ computedName }}</li><li> watch批改后的值：{{ watchName }} <input type="text" v-model="watchName" /></li><li><button @click="handleNumber">批改名字</button></li>JS
data() { return { name: "zhangsan", watchName: "张三", };},watch: { watchName(newVal, oldVal) { console.log("旧的值---->", newVal); console.log("新的值---->", oldVal); console.log("watch下所有的状态都会监听this.name---->", this.name); console.log( "watch下所有的状态都会监听this.computedName---->", this.computedName ); this.watchName = newVal; },},computed: { computedName: function (currentThis) { console.log( "和计算属性无关的状态产生更改时,不会执行，只有依赖的状态产生更改，缓存才会更新", currentThis ); return `依赖于name，：${this.name}`; },},methods: { handleNumber() { this.name = "lisi"; },},区别
依赖值： computed依赖于所应用的状态，相似在data中申明的name,
而watch中监听的值不依赖于某个值，只有组件状态产生更改，监听的值就实时获取最新值,
computed的实现应用的是getter和setter获取值，属于同步操作。
应用办法：
- computed最初须要进行return解决返回值，并且能够应用更深层次的getter和setter，具体参考computed篇
- watch除了callback回调函数外，还有两个属性值为布尔值的属性，用于首次绑定immediate，以及对对象的深度监听deep
- 两者相同点就是能够通过办法参数获取新值，联合其余状态解决相干的业务
**补充
在官网文档中，除了在组件中应用的watch外，官网文档中，还有对于示例中watch的介绍
具体用法能够在官网中：
https://cn.vuejs.org/v2/api/#...
$watch根底应用--来自官网文档例子
官网文档提醒：
留神：在变更 (不是替换) 对象或数组时，旧值将与新值雷同，因为它们的援用指向同一个对象/数组。Vue 不会保留变更之前值的正本。
vm.$watch('a.b.c', function (newVal, oldVal) { // 做点什么})// 函数vm.$watch( function () { // 表达式 `this.a + this.b` 每次得出一个不同的后果时 // 处理函数都会被调用。 // 这就像监听一个未被定义的计算属性 return this.a + this.b }, function (newVal, oldVal) { // 做点什么 })须要留神的是，如果应用vm.$watch，那么应用unwatch有助于咱们勾销对某个状态的监听，缩小不必要的监听和交互开销
var unwatch = vm.$watch('a', cb)// 之后勾销察看unwatch()结尾
- watch篇
- computed篇
花了三个篇幅去介绍watch和computed的应用办法，以及这两个钩子函数的区别，在理论的企业我的项目开发中，应用的场景和次数较多，所以尽量写的略微具体一些，同时也将笔记的代码放在了开源仓库，心愿对大家在开发vue2.x的我的项目中有所帮忙
码云 https://gitee.com/lewyon/vue-note
githup https://github.com/akari16/vue-note
文章集体博客地址：vue2.x版本中computed和watch的应用入门详解-关联和区别
创作不易，转载请注明出处和作者。