2024年vue中的watch的用法

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

大家对于 watch 应该不陌生，项目中都用过下面这种写法：

 watch: { someProp () { // do something } } // 或者 watch: { someProp: { deep: true, handler () { // do something } } }

上面的写法告诉 vue，我需要监听 someProp 属性的变化，于是 vue 在内部就会为我们创建一个 watcher 对象。（限于篇幅，我们不聊 watcher 的具体实现，感兴趣的可以直接看源码 watcher）

然而在 vue 中，watcher 的功能并没有这么单一，先上段代码：

 <template> <div> <p>a: {{ a }}</p> <p>b: {{ b }}</p> <button @click="increment">+</button> </div> </template> <script> export default { data () { return { a: 1 } }, computed: { b () { return this.a * 2 } }, watch: { a () { console.log('a is changed') } }, methods: { increment () { this.a += 1 } }, created () { console.log(this._watchers) } } </script>

在线demo

上面代码非常简单，我们现在主要关注 created 钩子中打印的 this._watchers，如下：

分别展开三个 watcher，观察每一个 expression，从上到下分别为：

 b() { return this.a * 2;↵ } "a" function () { vm._update(vm._render(), hydrating);↵ }

上面三个 watcher 代表了三种不同功能的 watcher，我们将其按功能分为三类：

在 watch 中定义的，用于监听属性变化的 watcher （第二个）
用于 computed 属性的 watcher （第一个）
用于页面更新的 watcher （第三个）

normal-watcher

我们在 watch 中定义的，都属于这种类型，即只要监听的属性改变了，都会触发定义好的回调函数

computed-watcher

每一个 computed 属性，最后都会生成一个对应的 watcher 对象，但是这类 watcher 有个特点，我们拿上面的 b 举例：

属性 b 依赖 a，当 a 改变的时候，b 并不会立即重新计算，只有之后其他地方需要读取 b 的时候，它才会真正计算，即具备 lazy（懒计算）特性

render-watcher

每一个组件都会有一个 render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }, 当 data/computed

中的属性改变的时候，会调用该 render-watcher 来更新组件的视图

三种 watcher 的执行顺序

除了功能上的区别，这三种 watcher 也有固定的执行顺序，分别是：

 computed-render -> normal-watcher -> render-watcher

这样安排是有原因的，这样就能尽可能的保证，在更新组件视图的时候，computed 属性已经是最新值了，如果 render-watcher 排在 computed-render 前面，就会导致页面更新的时候 computed 值为旧数据。

下面从一段实例代码中看下vue中的watcher

 <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </div> <!-- Since there is already a rich ecosystem of ajax libraries --> <!-- and collections of general-purpose utility methods, Vue core --> <!-- is able to remain small by not reinventing them. This also --> <!-- gives you the freedom to just use what you're familiar with. --> <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script> <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script> <script> var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 question 发生改变，这个函数就会运行 question: function (newQuestion) { this.answer = 'Waiting for you to stop typing...' this.getAnswer() } }, methods: { // _.debounce 是一个通过 lodash 限制操作频率的函数。 // 在这个例子中，我们希望限制访问yesno.wtf/api的频率 // ajax请求直到用户输入完毕才会发出 // 学习更多关于 _.debounce function (and its cousin // _.throttle), 参考: https://lodash.com/docs#debounce getAnswer: _.debounce( function () { var vm = this if (this.question.indexOf('?') === -1) { vm.answer = 'Questions usually contain a question mark. ;-)' return } vm.answer = 'Thinking...' axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) }, // 这是我们为用户停止输入等待的毫秒数 500 ) } }) </script>

小结

本文并不是源码解析类文章，只是从一个角度来聊聊，那些看似不相关的东西（computed/watch/页面更新）,内部却有着紧密的联系，希望能抛砖引玉，让大家更深入的去探索 vue

您可能感兴趣的文章:

Vue.js中关于侦听器（watch）的高级用法示例
Vue数据监听方法watch的使用
vue watch监听对象及对应值的变化详解
关于vue中watch检测到不到对象属性的变化的解决方法
vue进行图片的预加载watch用法实例讲解
vue watch自动检测数据变化实时渲染的方法
vue组件watch属性实例讲解
Vue2.0用 watch 观察 prop 变化(不触发)
详解vue2 $watch要注意的问题
详解Vue中watch的高级用法

知秋君

相关推荐