计算属性理论
计算属性：
1、定义：所需属性不存在，可以通过其他已有属性计算得出
2、原理：以Object.defineproperty()方法提供的get和set函数
3、get函数执行条件：被数据被读取时，或者所依赖数据发生改变时，get就会被调用。
set函数执行条件：数据被修改时，令返回值===修改值
4、优势：与methods相比，内部有缓存机制，效率高调试方便
计算属性实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<br>
<div class="biaoqian">
姓：<input type="text" v-model="firstName"><br><br>
名：<input type="text" v-model="firstName"><br><br>
全名：<span>{
{fullname}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const app =new Vue({
el:".biaoqian",
data:{
firstName:"小",
LastName:"王",
url : 'https://space.bilibili.com/1347961416?spm_id_from=333.788.0.0'
},
computed:{
fullname:{
//当fullname初次被读取时，或者所依赖数据发生改变时，get就会被调用,且返回值作为fullname的值
get(){
return this.firstname+"-"+this.LastName;
},
//当fullname数据被修改时，令返回值===修改值
set(value){
const arry = value.split('-');
this.firstName=arry[0];
this.LastName=arry[1];
}
}
}
})
</script>
</body>
</html>通过上面实例可以发现无论修改哪一个数据，其他数据都会做出相应改变。这就是利用了
computed：{}。
监视属性理论
定义:用于监视某种属性的属性值
方法：监视属性watch:
1、当监视的属性发生改变时，回调函数自动调用，进行相关操作
2、监视的属性必须存在，才可以被监视
3、监视的两种写法
1）在创建的app实例中传入watch：{} 配置
2）通过app.$watch配置
监视属性实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<br>
<div class="biaoqian">
<h1>今天温度{
{info}}</h1>
<button @click="chagetemperature">切换温度</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const app =new Vue({
el:".biaoqian",
data:{
ishigh:true
},
computed:{
//当不需要set函数，即计算属性不会被用户修改时，可以简写成以下形式
info(){
return this.ishigh ? '高' : '低'
}
},
methods:{
chagetemperature(){
this.ishigh = !this.ishigh//令data中的true改为false
}
},
watch:{
ishigh:{
//当isHigh发生改变时,hander就会被调用
handler(newValue,oldValue){
console.log("xiugail",newValue,oldValue)
}
// //初始化时让handler调用一下
// immediate:true
}
//简写（写成函数的形式）
// ishigh(newValue,oldValue){
// console.log("xiugail",newValue,oldValue)
// }
}
})
</script>
</body>
</html>运行结果
通过watch可以及时的反馈温度的高低变化
计算属性与监控属性的区别
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个原则：
1.所被Vue管理的函数，最好写成普通函数这种形式"(){}'，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数这种形式（）=>{}，这样this的指向才是vm 或 组件实例对象。
总结
本章学习了计算属性和监视属性。这两种不同的方法都有起作用，在后面的项目学习中我们对其理解会加深。这两种属性都有简写方式。（在代码中有提到），后面的文章可能会以简写的方式进行书写。
标签：computed,Vue,函数,watch,Vue2,监视,属性 From： https://blog.csdn.net/2301_77136716/article/details/145246887