定义
原理
get函数什么时候执行?
优势
备注
computed: { "计算属性名" () { return "值" } }
需求: 求2个数的和显示到页面上
<template> <div> <p>{{ num }}</p> </div> </template> <script> export default { data(){ return { a: 10, b: 20 } }, // 计算属性: // 场景: 一个变量的值, 需要用另外变量计算而得来 /* 语法: computed: { 计算属性名 () { return 值 } } */ // 注意: 计算属性和data属性都是变量-不能重名 // 注意2: 函数内变量变化, 会自动重新计算结果返回 computed: { num(){ return this.a + this.b } } } </script> <style> </style>
计算属性写成配置对象的格式:对象中用get和set函数
get的作用: 当有人读取fullName时,get就会被调用,且返回值就作为计算属性的值 (get一定要写return)
get什么时候调用? 1.初次读取fullName时。 2.所依赖的数据发生变化时。
get(){ console.log('get被调用了') // console.log(this) // 此处的this是vm(Vue实例) return this.firstName + '-' + this.lastName },
set:当计算属性的值被修改时被调用 形参接收的是传入的新值
... computed:{ fullName:{ //get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值 //get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') // console.log(this) //此处的this是vm return this.firstName + '-' + this.lastName }, //set什么时候调用? 当fullName被修改时。 set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } })
<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 --> <button @click="isHot = !isHot">切换天气</button>
当被监视的属性变化时, handler回调函数自动调用, 进行相关操作
监视的属性必须存在,才能进行监视!!
... // 写法1. 传入watch配置 侦听ishot属性 watch:{ isHot:{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用?当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } }) // 写法2. 通过vm.$watch监视 vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下,默认是false //handler什么时候调用?当isHot发生改变时。 handler(newValue,oldValue){ // 有两个参数,一个是新值,一个是旧值 console.log('isHot被修改了',newValue,oldValue) } })
深度监视:
备注:
data:{ isHot:true, numbers:{ a:1, b:1 } }, watch:{ // 监视多级结构中某个属性的变化(原始写法是要加引号的,简写可以不加,但这种情况要加,否则报错) /* 'numbers.a':{ handler(){ console.log('a被改变了') } } */ //监视多级结构中所有属性的变化 numbers:{ deep:true, // 如果不开启这个,那监测的就是numbers的地址是否有变化 handler(){ console.log('numbers改变了') } } }
监视属性-简写
当监视属性中只有handler()而不需要开启其他配置项时才能简写
watch:{ isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } } /* vm.$watch('isHot',function (newValue,oldValue) { console.log('isHot被修改了',newValue,oldValue,this) }) */
computed和watch之间的区别
两个重要的小原则
watch:{ firstName(val){ setTimeout(()=>{ console.log(this) //vue实例对象,若用普通函数则返回Window this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } }