【Vue】基础系列(三)计算属性-监视属性-双向绑定-示例-getter/setter显示与监听-计算属性缓存

【Vue】基础系列(三)计算属性-监视属性-双向绑定-示例-getter/setter显示与监听-计算属性缓存_第1张图片

1. 计算属性 computed

  • 在computed属性对象中定义计算属性的方法
  • 在页面中使用{{方法名}}来显示计算的结果
  1. 定义:要用的属性不存在,要通过已有属性计算得来。
  2. 原理:底层借助了Objcet.defineproperty方法提供的gettersetter
  3. get函数什么时候执行?
    (1). 初次读取时会执行一次。
    (2). 当依赖的数据发生改变时会被再次调用。
  4. 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
  5. 备注:
    1.计算属性最终会出现在vm上,直接读取使用即可。
    2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。

//完整写法
 fullName:{
	get(){
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	},
	set(value){
		console.log('set',value)
		const arr = value.split('-')
		this.firstName = arr[0]
		this.lastName = arr[1]
	}
} 
//简写
fullName(){
	console.log('get被调用了')
	return this.firstName + '-' + this.lastName
}

2. 监视属性 watch

  • 通过通过vm对象的$watch()watch配置来监视指定的属性
  • 当属性变化时, 回调函数自动调用, 在函数内部进行计算
  1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  2. 监视的属性必须存在,才能进行监视!!
  3. 监视的两种写法:
    (1). new Vue时传入watch配置
    (2). 通过vm.$watch监视
watch:{
	isHot:{
		immediate:true, //初始化时让handler调用一下
		//handler什么时候调用?当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}
}
vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用?当isHot发生改变时。
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

深度监视:
(1). Vue中的watch默认不监测对象内部值的改变(一层)。
(2). 配置deep:true可以监测对象内部值改变(多层)。
备注:
(1). Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
(2). 使用watch时根据数据的具体结构,决定是否采用深度监视。

numbers:{
	deep:true,
	handler(){
		console.log('numbers改变了')
	}
}

简写

//正常写法
isHot:{
	// immediate:true, //初始化时让handler调用一下
	// deep:true,//深度监视
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
}
//简写
isHot(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
} 

3. 计算属性与监视属性的区别

computed和watch之间的区别:

  1. computed能完成的功能,watch都可以完成。
  2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则:

  1. 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
  2. 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。

4. 例子

<body>
    <div id="demo">
        姓:<input type="text" placeholder="First Name" v-model="firstName"><br>
        名:<input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名1(单向):<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
        姓名2(单向):<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
        姓名3(双向):<input type="text" placeholder="Full Name3" v-model="fullName3"><br>

        <p>{{fullName1}}p>
        <p>{{fullName1}}p>
        <p>{{fullName1}}p>
        
    div>

    <script src="../js/vue.js">script>
    <script>
        const vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'A',
                lastName: 'B',
                fullName2: 'A B'
            },

            computed: {
                // 什么时候执行:初始化显示 / 相关的data属性数据发生改变
                // 做什么的: 计算并返回当前属性的值
                fullName1() { //计算属性中的一个方法,方法的返回值作为属性 (回调函数)
                    console.log('fullName1()') // 必然会掉用
                    return this.firstName + ' ' + this.lastName;
                },

                fullName3: { //不是函数是一个对象,里面有两个方法  
                    get() {
                        // 回调函数 : 1. 你定义的 2. 你没有调用 3. 但他最终执行了
                        // 1. 什么时候调用? 2. 用来做什么
                    // 回调函数 当需要读取当前属性值时回调  根据相关的数据计算并返回当前属性的值
                        return this.firstName + ' ' + this.lastName;
                    },

                    set(value) {
                    // 回调函数 监视当前属性值的变化 当属性值发生改变时回调  更新相关的属性数据
                    const names = value.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                    }
                }
            },

            watch: { //配置监视
                firstName: function(value){ // firstName 发生了变化
                    console.log(this); //就是vm对象
                    this.fullName2 = value + ' ' + this.lastName;
                }
            }
        });

        vm.$watch('lastName', function(value) {
            //更新fullName2
            this.fullName2 = this.firstName + ' ' + value;
        })
    script>

【Vue】基础系列(三)计算属性-监视属性-双向绑定-示例-getter/setter显示与监听-计算属性缓存_第2张图片

你可能感兴趣的:(前端框架Vue,vue,javascript,js)