计算属性 computed
应用场景：当页面中有某些数据依赖其余数据进行变动的时候，能够应用计算属性
计算属性 computed 是基于data中数据进行解决的，data数据变动，他也跟着变动
当data中数据没有产生扭转时，咱们调用computed中函数n次，只会进行缓存（执行一次）每个计算属性都蕴含两个set、get 属性
监听属性 watch
应用场景：数据变动时执行异步或开销较大的操作，能够随时批改状态的变动
watch:相似于监听机制+事件机制。
在大部分状况下咱们都会应用computed，但如果要在数据变动的同时进行异步操作或者是比拟大的开销，那么watch为最佳抉择。watch为一个对象，键是须要察看的表达式，值是对应回调函数。值也能够是办法名，或者蕴含选项的对象。
<template> <div> <input v-model="fristName" /> <br> <input v-model="lastName" /> <div>计算属性批改值：{{cfullName}}</div> <div>监听属性批改值：{{wfullName}}</div> </div></template><script> export default { data() { return { fristName: '', lastName: '', wfullName: '' } } computed: { // 残缺写法 cfullName：{ // 1.有人读取fullName时调用 // 2.初始化是后调用,依赖数据变动调用 get() { return this.fristName + '-' + this.lastName } // 当fullName被批改时候调用 set(newVal) { let arr = newVal.split('-') this.fristName = arr[0] this.lastName = arr[1] } } // 简写形式（只用到get，不须要set） fullName() { return this.fristName + '-' + this.lastName } } watch: { // 残缺写法 fristName:{ // 是否首次加载就监听，默认false immediate: true, // 是否深度监听，默认false，列入监听的是一个对象，外面的数据要监听，就要deep deep: true, handler(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal } } // 简写 fristName(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal } } } // watch还有一种写法 // 残缺写法 vm.$watch('fristName',{ // 是否首次加载就监听，默认false immediate: true, // 是否深度监听，默认false，列入监听的是一个对象，外面的数据要监听，就要deep deep: true, handler(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal } }) // 简写 vm.$watch('fristName', function(newVal,oldVal){ this.wfullName = oldVal + '-->' + newVal })</script>methods computed watch三者区别
- methods不存在缓存，执行一次运行一次，执行n次，运行n次
- computed有缓存，调用屡次只会执行一次，不能执行异步工作
- watch能执行异步工作，computed能实现的，watch能实现，watch能实现的，computed不肯定能实现