【vue学习笔记】案例学习之插值语法、methods、计算属性computed、监视属性watch

CSDN话题挑战赛第2期
参赛话题：学习笔记

案例描述：获取输入内容并显示

一、插值语法实现

<div id="root">
  姓：<input type="text" v-model="firstName"><br/>
  名：<input type="text" v-model="lastName"><br/>
  全名：<span>{{firstName}}-{{lastName}}</span> // 用下划线链接
</div>

<script type="text/javascript">
	New Vue ({
	  el:"#root", 
	  data: { 
	    firstName:"张",
	    lastName:"三",
	  }
	})
</script>

二、methods 实现

⚠️ 用 @click 绑定事件时，如不传参，加不加括号都行，但在插值语法中必须加，否则整个函数被传到页面上，加上只将返回值传到页面。

⚠️ 前端页面显示效果同，当输入框改变时，引起双向绑定的 data 改变，data 改变又引起页面上用到 data 的地方改变，vue 模板重新解析。如模板中调用了方法，则方法被重新调用。

<div id="root">
  姓：<input type="text" v-model="firstName"><br/>
  名：<input type="text" v-model="lastName"><br/>
  全名：<span>{{fullName()}}</span>
</div>

<script type="text/javascript">
	New Vue ({
	  el:"#root", 
	  data: { 
	    firstName:"张",
	    lastName:"三",
	  },
	  methods:{
	    show(e){
	      Return this.firstName + '-' + this.lastName
	    }
	  }
	})
</script>

三、计算属性 computed 实现

Vue 中的属性即 data 中的数据，左边是属性名，右边是属性值，计算属性是基于已有属性加工计算产生的结果，计算属性放在 computed 中。

⚠️ computed 中的值 vm._data 上没有，computed 中的值是用 vm._data 计算出来的，挂在 vm 上。
用插值语法，读 computed 中的值，初次读后放在缓存中，后续直接从缓存取。当且仅当其所依赖的 data 数据改变时，重新读取并更新缓存。

<div id="root">
  姓：<input type="text" v-model="firstName"><br/>
  名：<input type="text" v-model="lastName"><br/>
  全名：<span>{{fullName()}}</span>
</div>

<script type="text/javascript">
	New Vue ({
	  el:"#root", 
	  data: { 
	    firstName:"张",
	    lastName:"三",
	  },
	  computed:{
	    fullName:{
	      // 当有人读取 fullName 时，get 被调用，返回值作为 fullName 的值
	      get() {
	        // 此处 this 是 vm
	        return this.firstName + "-" + this.lastName
	      },
	      // set 不是必写的 如以后不会被人改可不写
	      // 当 fullName 被改时 set 调用
	      set(val) {
	        Const arr = value.split('-')
	        this.firstName = arr[0]
	        this.lastName = arr[1]
	      }
	    }
	  }
	})
</script>

于控制台，vm.fullName = “李-四”，此时 set 执行，引起 firstName 和 lastName 变化，页面中用到它们的地方更新，fullName 依赖其算出，因此 fullName 也发生变化，输入框"张-三"变"李-四"
如写 let a = 1，get 中 return a，在控制台改a不会引起页面用到a的地方变化，a 完全脱离vue管理。

📒 data 和 methods 中写啥 vm 上就是啥，但 computed 中写的对象往 vm 上放时，会自动找并调用 get 方法，拿到 get 的返回值后放到 vm 身上，放时的名字就是 computed 中写的对象名字。

📒 get 和 set 都是 vue 管理的函数，因此不能写成箭头函数，否则 this 的指向不是 vm 而是window

📒 计算属性：
定义：要用的属性不存在，要通过已有属性算出。
原理：底层借助 object.defineproperty 方法提供的 get 和 set
优势：于 methods 相比，内部有缓存机制，复用效率更高，方便调试
用法：计算属性最终出现在 vm 上，直接读取使用即可，不用写成 {{计算属性名.get()}}，写{{计算属性名}}即可。如要修改计算属性，必须写 set 函数响应修改，且 set 中要引起计算属性所依赖的数据发生改变
简写：计算属性只读不改时可简写成函数形式，函数作用同 get

<script type="text/javascript">
	New Vue ({
	  // 此次省略部分代码
	  },
	  computed:{
	    fullName(){
	      ……
	    }
	  }
	})
</script>

四、监视属性 watch 实现

<div id="root">
  姓：<input type="text" v-model="firstName"><br/>
  名：<input type="text" v-model="lastName"><br/>
  全名：<span>{{fullName}}</span>
</div>

<script type="text/javascript">
	Const vm = New Vue ({
	  el:"#root", 
	  data: { 
	    firstName:"张",
	    lastName:"三",
	    fullName:"张-三"
	  },
	  watch:{ // 先用简写，以后需要用配置项时再改写
	    firstName(newVal,oldVal) { // 未用到的参数可不写
	      this.fullName = newVal + '-' + this.lastName
	    },
	    lastName(val) {
	      this.fullName = this.firstName + '-' + val
	    }
	  }
	})
</script>

Watch VS Computed：

计算属性实现，data 中只准备姓和名，全名在 computed 里拼接；监视属性实现，data 里还需准备全名并配初始值，既要监视姓又要监视名。这么看是计算属性实现更简单，如想延迟1s再让全名改变，就要使用监视开启异步任务，因为 watch 不依赖返回值

<script type="text/javascript">
	Const vm = New Vue ({
	  // 省略部分代码
	  
	  watch:{ // 先用简写，以后需要用配置项时再改写
	    firstName(val) { // 未用到的参数可不写
	      setTimeOut( ()=>{
	        this.fullName = newVal + '-' + this.lastName
	      },1000);
	    }
	  }
	})
</script>

计算属性实现的错误示范：这么写前端无任何 fullName 显示，修改姓后 1s 也不会有。因为返回值会交给 setTimeOut 函数，但是 fullName 无返回值，它的返回值是 undefine，计算属性是依赖返回值的，无法让它等一等再有返回值，因此计算属性中无法开启异步维护属性的任务

<script type="text/javascript">
	Const vm = New Vue ({
	  // 省略部分代码
	  
	  computed:{ 
	    fullName() { 
	      setTimeOut( ()=>{
	        return this.fullName = newVal + '-' + this.lastName
	      },1000);
	    }
	  }
	})
</script>

📒 定时器为什么能是箭头函数？
因为它不是 vue 管理的函数，尽管它在 vue 管理的函数中开启，但它指定的回调不受 vue 控制，是受浏览器定时管理模块控制的，到时间后由 js 引擎帮忙调用，因此一定得写成箭头函数，否则 this 找不到 vue 上，只能找到 window，因为 js 引擎帮调时已把 this 指成 window，且写成箭头函数时，它没有自己的 this，只能往外找 this，外面写成普通函数，被 vue 管理，this 是 vm，找到的 this 就是 vm。非箭头函数写法：

<script type="text/javascript">
	Const vm = New Vue ({
	  // 省略部分代码
	  
	  computed:{ 
	    fullName() { 
	      setTimeOut( function(){
	        return this.fullName = newVal + '-' + this.lastName
	      },1000);
	    }
	  }
	})
</script>

📒 computed 和 watch 的区别

1. computed 能完成的功能 watch 都可以，但 watch 能完成的 computed 不一定能完成，如异步操作
2. 两个重要原则：
   • 被 vue 管理的函数最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象。不用 vm 上的东西时可随意，一旦用就不能写成箭头函数，否则无法用 vm 上的东西
   • 所有不被 vue 管理的函数（如定时器的回调函数、ajax的回调函数、promise 的回调函数等）最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象