Vue中的 computed计算属性侦听watch监听属性的区别

Vue computed计算属性

规则：
1.用已有的属性计算不存在的属性
2.默认调用一次get()
3.简写：只有值不发生改变才可以是用简写（函数），
值发生改变必须使用对象，才可以配置set()方法
4.底层原理使用Object.definproperty(目标对象,键名,{get(){},set(value){}})

<title>姓名案例_计算属性实现</title>
<script type="text/javascript" src="../js/vue.js "></script>
<div id="root">
姓: <input type="text" v-model="firstName"> <br/ >
名: <input type="text" v-model="lastName " > <br/>
测试: <input type="text" v-model="x">
<br/>
//这里修改不会调fullName的get方法全名: 
<span>iifullName}}</span> <br/>
<!--全名: <span>i{fullName}}</ span> <br / > --><! --
全名: <span>{ifullName}}</span> <br/ > --></ div>
<script type="text/javascript">
vue.config.productionTip = falseconst
 vm = new Vue( {
    el: '#root ' ,
    data: {
     firstName: '张',
     lastName: '三',
     x:"你好'
 },
   computed: i
   //完整写法
	fullName: {ll get() {
	l lconsole.log( 'get被调用了')
	llreturn this.firstName + '-' + this.lastNamel/},
	l lset( value) {
	l lconsole.log( 'set ' , value)//
	const arr = value.split( '-')
	this.firstName = arr[e]llthis.lastName = arr[1]l/}
	ll }
//简写
fullName() i
console.log( 'get被调用了')
return this.firstName + '-' +this.lastName)}
}})
</ script>

侦听属性基本用法

watch监听属性

规则：
1.监听已存在的属性
2.immediate:true默认调用一次，false不会
3.简写：只有handler方法才可以简写。写法:监听的属性(新值,旧值){}
4.监听对象中的值需要深度监听，deep:true

<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
<div id="root">
<h3>今天天气很{{ info }}</h3>
<! -- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
<!-- <button @click="isHot = !isHot">切换天气</button> -->
<button @click="changeweather">切换天气</button>
</div>
<script type="text/javascript">
vue.config.productionTip = falseconst 
vm = new Vue({
	el : ' #root ',
	data:{
	isHot:true,}，
	computed : {info(){
	return this.isHot ?'炎热':'凉爽'
},
methods: {
	changeweather(){
	this.isHot = !this.isHot}
}})
</ script>

区别：
1.computed能做的watch都可以做，watch可以做的，computed不一定能做
2.使用vm.$watch方法时，需要使用普通函数
3.对于定时器，函数回调，ajax回调,promise回调,建议使用箭头函数

指令

// 自定义指令
        directives:{

        },
        // 计算属性
        computed:{

        },
        // 监听属性
        watch:{

        },