Vue中watch、computed、updated的区别

watch

watch：侦听器，监听某个数据的变化然后执行相对应的方法，来响应数据的变化，尤其是当需要数据变化时执行异步操作或着开销较大时，这个方式是最有用的

<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p>
</div>

// 在一个vue实例中
new Vue({el: '#watch-example'data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {/* 当 question 改变时，这个函数就会运行 */question() {this.answer = 'Waiting for you to stop typing...'}}
})

computed

computed：计算属性，在vue中我们不需要直接在template中直接进行计算，例如：{{ firstName + lastName }}，因为在模板中，放入太多的逻辑操作，会让模板本身过于繁重，尤其是当大量使用这些逻辑表达式时，对页面的可维护性造成很大的影响，对于一些较为复杂的逻辑运算，我们可以用computed来进行操作

<div id="vm">{{ fullName }}</div>

new Vue({el: '#vm',data: {firstName: 'jing',lastName: 'zhi'},computed: {fullName() {return this.firstName + this.lastName}}
})

updated

updated：是vue声明周期中的一个钩子，在数据更改导致的虚拟DOM重新渲染和更新完毕之后被调用，只要数据发生变化，每次触发的代码都是同一个
updated不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在updated里使用$nextTick

updated() {this.$nextTick(function () {//  仅在整个视图都被重新渲染之后才会运行的代码     })
}

三者的区别

computed是计算一个新属性，并将该属性挂载到Vue实例上，watch是监听已经存在且已经挂载在Vue实例上的数据，updated是生命周期函数，当数据更新时，执行相同的函数，导致虚拟DOM重新渲染
computed本质是一个惰性求值的观察者，具有缓存，只有当缓存改变，才会再一次执行计算属性，而watch则是当数据变化时就会调用执行函数
从使用场景来说，computed适用于一个数据被多个数据影响，watch适用于一个数据影响多个数据

Vue中watch、computed、updated的区别相关推荐

Vue中的computed属性
1.前言本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
vue中的computed 与 watch
计算属性 computed 指通过计算得来的属性,用于监听属性的变化 computed里面的函数调用的时候不需要加() 方法里必须有一个返回值 return computed中的函数不会通过事件去触 ...
vue中params和query的区别，以及具体用法
query传递参数会在url后面用?连接起来,且参数之间用&&符号连接然后显示在页面的url中:params传递参数不会显示在页面中:query有点像ajax中的get请求,而para ...
Vue中的computed计算属性
文章目录 computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性 ...
vue中runtimecompiler和runtimeonly的区别
简单总结如果在之后的开发中,你依然使用template,就需要选择runtimecompiler 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择runtimeonly runtimec ...
vue中的target与currentTarget区别
<template><transition name="slide"><div class="top_box" @click=&q ...
面试题： Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
Vue中mounted和created的区别
生命周期钩子组件状态最佳实践 beforeCreate 实例初始化之后,this指向创建的实例,不能访问到data.computed.watch.methods上的方法和数据常用于初始化非响应式 ...
关于Vue中的v-if和v-for区别讲解
首先在官方文档中明确指出v-for和v-if不建议一起使用. 一.v-if和v-for的作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染. v-fo ...