Vue2侦听器及计算属性

2023-09-24 13 0

Watch

watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作

监听器函数需要定义到Vue实例的watch节点下

监听器本质上是一个函数,要监听哪个数据的变化,就把数据名作为方法名

方法格式监听

 const app=new Vue({el: '#app',data:{username: ''},watch:{//监听username值得变化//newVal是变化后的新值,oldVal是变化之前的旧值username(newVal, oldVal){console.log(newVal, oldVal)}}})

如果要侦听的是对象的子属性变化,也可以使用方法格式的侦听

  watch:{//如果侦听的是对象的子属性的变化,需要包裹一层单引号'info.username'(newVal, oldVal){//code}}

方法格式的监听器无法在刚进入页面时自动触发

数组格式监听

当侦听器传入一个回调数组,他们会被逐一调用

  watch:{//如果侦听的是对象的子属性的变化,需要包裹一层单引号info:['handle1',function handle2 (val, oldvalue){ /* code */ },{handler: function handle3 (val, oldvalue){ /* code */ }}]}

对象格式监听

默认情况下,组件在初次加载完毕后不会调用watch侦听器

如果想让watch立即被调用,需要使用immediate选项

  watch:{username: {//handler是固定写法,表示当username的值变化时,自动调用handler处理函数handler(newVal, oldVal){//code},//表示页面初次渲染好之后,就立即触发当前的watch侦听器immediate: true}}

如果监听到的是一个对象,那么对象中的值发生变化不会触发侦听器

此时需要对象格式侦听器中的另一个属性deep开启深度监听

开启深度监听后无法获得旧的值 旧的值获取到的为新的值

  watch:{info: {//handler是固定写法,表示当username的值变化时,自动调用handler处理函数handler(newVal, oldVal){//code},//开启深度监听,只要对象中任意一个属性变化了,就会触发"对象的侦听器"deep: true}}

每次对象中属性变化都会触发深度监听,此时在对象的监听函数handler中对变化的属性进行处理

监听路由中query参数的变化

watch: {$route: {handler() {// code 业务逻辑}},deep: true,// 深度监听 同时可以监听到params参数变化
}

计算属性

计算属性将被混入Vue实例中,所有getter和setter的this上下文自动的绑定Vue实例

计算属性的结果会被缓存,除非依赖的响应式property变化才会重新计算

如果某个依赖(非响应式property)在该实例范畴之外,则计算属性是不会被更新的

函数

计算属性指的是通过一系列运算之后,最终得到的一个属性值

这个动态计算出来的属性值可以被模板结构或methods方法使用

  const app=new Vue({el: '#app',data: {r: 0, g: 0, b: 0},computed: {rgb(){return `rgb(${this.r},${this.g},${this.b})`}},methods: {show(){console.log(this.rgb);}}})

当有部分代码需要重复操作时,可以封装到Vue实例的computed节点下,必须以函数声明

实际产生的为一个Vue实例中的属性,且属性名是函数名,属性值就是return的值

可以在Vue实例中通过this调用

箭头函数

计算属性可以使用箭头函数,但是箭头函数不能通过this获取到vue的实例

Vue为箭头函数提供了一个形参用于获取Vue实例

  const app=new Vue({el: '#app',data: {r: 0, g: 0, b: 0},computed: {// 箭头函数的this 不指向实例自身 所以如果计算属性写成箭头函数 vue 会给我们提供一个变量来访问实例的数据// vm为Vue的实例对象rgb:(vm)=>{return `rgb(${vm.r},${vm.g},${vm.b})`}}})

对象写法

当访问计算属性时会触发get方法 返回值为计算属性的值

当设置计算属性时会触发set方法

  const app=new Vue({el: '#app',template:`<div><div>{{ cd }}</div><button @click='cd="abc"'>设置cd的值</button></div>`,computed: {cd:{// 取值函数 表示读取cd属性的值会执行的函数get(){return 'cd的值'},// 储值函数 表示打算修改cd属性会执行的函数set(val){console.log('cd的值被修改',val)}}}})
代码编程
赞赏

相关文章

五道口地摊观察(2)
堆栈的使用【吉林大学】
【互动媒体专题设计】《打群架》——模拟《拥挤城市》
寻找大富翁【浙江大学】★
城市向智能化方面发展,主要面临哪些挑战?
子串计算【北京大学】