vue计算属性computed和侦听属性watch的用法和区别

计算属性computed是基于响应式进行缓存，所以在执行的时候效率高，且只执行一次，从缓存读取，除非data里面的数据有更改才重新调用。注意：计算属性里面必须要ruturn，否则无法拿到结果。计算属性本质是一个函数，当做属性来使用，调用时不要加（）

  <div id="app"><div>{{reverseString}}</div><div>{{reverseString}}</div><div>{{reverseMessage()}}</div><div>{{reverseMessage()}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存*/var vm = new Vue({el: '#app',data: {msg: 'Nihao',num: 100},methods: {reverseMessage: function(){console.log('methods')return this.msg.split('').reverse().join('');}},computed: {reverseString: function(){console.log('computed')// return this.msg.split('').reverse().join('');var total = 0;for(var i=0;i<=this.num;i++){total += i;}return total;}}});</script>

侦听器 watch

使用watch来响应数据的变化
一般用于异步或者开销较大的操作（定时器，ajax，dom中on事件）
watch 中的属性一定是data 中已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

 <div id="app"><input type="text" v-model='firstName'><input type="text" v-model='lastName'><input type="text" v-model="msg"><div>{{fullName}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*侦听器 */var vm = new Vue({el: '#app',data: {firstName: 'lihan',lastName: 'Green',fullName: 'Jim Green',msg:'hello',obj:{ a:1,b:2 }},method:{getList(){...}},computed: {/*用计算属性也能实现*//* fullName: function(){return this.firstName + ' ' + this.lastName;}*/},watch: {firstName: function(val) {this.fullName = val + ' ' + this.lastName;},lastName: function(val) {this.fullName = this.firstName + ' ' + val;},//监听obj.a的变化// 'obj.a':(n,o){ }  //写法一'obj.a':{         //写法二//handler是一个回调函数//handler:'getList'  //上面定义的方法handler(n,o) { },//deep: true,//深度监听对象immediate: true//immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法}}});</script>

计算属性和方法和侦听器的区别和联系

一般是使用计算属性，因为他有缓存
methods一般是处理业务使用的，只要手动调用了这个方法就会执行，但是computed计算属性，因为他有缓存
watch，是对我们data上面的一些数据进行观察和响应；一般的时候使用计算属性替代watch；因为滥用watch的话，会影响性能。(最开始的Angularjs1.x 就有这个问题)。但是watch有它自己的使用场景，别人不能替代。当需要在数据变化时执行异步或开销较大的操作时（js里面学过的异步任务：定时器 + ajax + dom事件）

vue计算属性computed和侦听属性watch的用法和区别相关推荐

【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
Vue的计算属性、侦听属性与过滤器解析
文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对比过滤器过滤器使用方法过滤器应用场景综合小练习知识点计算属性计算 ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
Vue属性篇_侦听器watch
作用:侦听属性,响应数据(data&computed)的变化,当数据变化时,会立即执行对应函数,其属性值可以为函数.字符串.对象和数组. 1.属性值类型 (1)函数类型函数类型中,被侦听的数 ...
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）
Vue3官网-高级指南(十七)响应式计算computed和侦听watchEffect(onTrack.onTrigger.onInvalidate.副作用的刷新时机.watch .pre).渲染机制和 ...
vue学习篇--02内置指令计算属性侦听属性
文章目录 18个指令 v-text v-html: v-show: v-if: v-for: 可以遍历数组对象数字字符串 v-bind: 解析属性:title src href type alt ...

vue计算属性computed和侦听属性watch的用法和区别

vue计算属性computed和侦听属性watch的用法和区别相关推荐

最新文章

热门文章