Vue 计算属性&侦听属性

9 篇文章 0 订阅
7 篇文章 0 订阅

总结

 
      computed和watch之间的区别:
            1.computed能完成的功能,watch都可以完成。
            2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
      两个重要的小原则:
               1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
               2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,
                  这样this的指向才是vm 或 组件实例对象。

计算属性

一. 插值

<div id="root">
	姓:<input type="text" v-model="firstName"> <br/><br/>
	名:<input type="text" v-model="lastName"> <br/><br/>
	全名:<span>{{firstName}}-{{lastName}}</span>
</div>
new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三'
	}
})

二. methods 实现

<div id="root">
	姓:<input type="text" v-model="firstName"> <br/><br/>
	名:<input type="text" v-model="lastName"> <br/><br/>
	全名:<span>{{fullName()}}</span>
</div>
new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三'
	},
	methods: {
		fullName(){
			console.log('@---fullName')
			return this.firstName + '-' + this.lastName
		}
	},
})

三. 计算属性实现 computed ,用get和set

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

</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		x:'你好'
	},
	methods: {
		demo(){
			
		}
	},
	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]
			}
		}

        //简写,和上面的get,set只用一种
        fullName(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		}
	}
})
</script>

二.侦听属性

 逻辑 :  方法changeWeather方法控制isHot值, 计算属性改变info的值

计算属性 +methods 实现监听

<div id="root">
	<h2>今天天气很{{info}}</h2>
	<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
	<!-- <button @click="isHot = !isHot">切换天气</button> -->
	<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue({
		el:'#root',
		data:{
			isHot:true,
		},
		computed:{
			info(){
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather(){
				this.isHot = !this.isHot
			}
		},
	})
</script>

用watch监听

<body>
	<!-- 
			监视属性watch:
				1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
				2.监视的属性必须存在,才能进行监视!!
				3.监视的两种写法:
						(1).new Vue时传入watch配置
						(2).通过vm.$watch监视
	 -->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>今天天气很{{info}}</h2>
		<button @click="changeWeather">切换天气</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	const vm = new Vue({
		el:'#root',
		data:{
			isHot:true,
			numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
			}
		},
		computed:{
			info(){
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather(){
				this.isHot = !this.isHot
			}
		},
		/* watch:{
			isHot:{
				immediate:true, //初始化时让handler调用一下
				//handler什么时候调用?当isHot发生改变时。
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} */
	})

	vm.$watch(
		'isHot',{
			deep:true,  深度监视,如果是数组也能监视内部变化
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用?当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}
	)
</script>

侦听属性 延时执行

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值