面试题： Vue中的 computed 和 watch的区别

computed

computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算

1）下面是一个比较经典简单的案例

<template><div class="hello">{{fullName}}</div>
</template><script>
export default {data() {return {firstName: '飞',lastName: "旋"}},props: {msg: String},computed: {fullName() {return this.firstName + ' ' + this.lastName}}
}
</script>复制代码

注意

在Vue的 template模板内（{{}}）是可以写一些简单的js表达式的很便利，如上直接计算 {{this.firstName + ' ' + this.lastName}}，因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而 computed 的设计初衷也正是用于解决此类问题。

应用场景

适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed

watch

watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

<template><div class="hello">{{fullName}}<button @click="setNameFun">click</button></div>
</template><script>
export default {data() {return {firstName: '飞',lastName: "旋"}},props: {msg: String},methods: {setNameFun() {this.firstName = "大";this.lastName = "熊"}},computed: {fullName() {return this.firstName + ' ' + this.lastName}},watch: {firstName(newval,oldval) {console.log(newval)console.log(oldval)}}
}
</script>复制代码

总结：

1.如果一个数据依赖于其他数据，那么把这个数据设计为computed的

2.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

转载于:https://juejin.im/post/5c9990d6f265da60ea146d21

面试题： Vue中的 computed 和 watch的区别相关推荐

Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
Vue中的computed 和 watch
computed 和 watch Vue2 options文档响应式原理options.data 1.data会被Vue监听 2.会被Vue实例代理,vm就是data的代理 3.每次对data的读写 ...
Vue中的computed属性
1.前言本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
Vue中的computed计算属性
文章目录 computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性 ...
Vue中的computed是什么？怎么用？
提示:前端查漏补缺,仅代表个人观点,不接受任何批评文章目录一.computed是什么? 二.使用注意事项 1.计算属性的结果会被缓存 2.computed和method的区别总结 1. 使用场景 ...
前端面试题 Vue 中的生命函数(钩子函数)
目录一,生命周期(钩子函数) 的简介二,四类钩子函数的触发条件及使用方法钩子函数声明的位置: 1. Lifecycle-初始化 beforeCreate 和 created 2.Lifec ...
面试官：Vue中组件和插件有什么区别？
一.组件是什么回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度 ...
vue中的computed 与 watch
计算属性 computed 指通过计算得来的属性,用于监听属性的变化 computed里面的函数调用的时候不需要加() 方法里必须有一个返回值 return computed中的函数不会通过事件去触 ...
Vue中的computed的用法
computed又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed具有缓存性,当无关值变化时,不会引起computed声明值的变化.产生一个新的变量并挂载到vue ...

面试题： Vue中的 computed 和 watch的区别

computed

注意

应用场景

watch

总结：

面试题： Vue中的 computed 和 watch的区别相关推荐

最新文章

热门文章