目录
一、计算属性
1.定义
要用的属性不存在，要通过已有的属性计算得来
2.原理
底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
(1).初次读取时会执行一次
(2).当依赖的数据发生改变时会被再次调用
4.优势
与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5.备注
1.计算属性最终会出现在vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
6.案例（使用三种方法实现）
1.使用插值语法实现
<body>
<div id="root">
姓：<input type="text" v-model:value='firstname'><br/><br/>
名：<input type="text" v-model:value='lastname'><br/><br/>
全名：<span>{
{firstname}}-{
{lastname}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
}
})
</script>
2.使用methods实现
<body>
<div id="root">
姓：<input type="text" v-model:value='firstname'><br/><br/>
名：<input type="text" v-model:value='lastname'><br/><br/>
全名：<span>{
{fullName()}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
methods:{
fullName(){
return this.firstname+'-'+this.lastname
}
}
})
</script>
3.使用计算属性实现
<body>
<div id="root">
姓：<input type="text" v-model:value='firstname'><br/><br/>
名：<input type="text" v-model:value='lastname'><br/><br/>
全名：<span>{
{fullName}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false//阻止vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
computed:{
fullName:{
get(){
console.log('ddd')
return this.firstname+'-'+this.lastname
},
set(value){
console.log('set',value)
const arr=value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
Q: get有什么作用？
A: 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
Q: get什么时候调用？
A: 1.初次读取fullName时；
2.所依赖的数据发生变化时 。
Q：set什么时候调用？
A：当fullName被修改时
7.计算属性的简写
在只考虑读取，不考虑修改的时候，计算属性可以使用简写的方式：
computed: {
//简写
fullName(){
console.log('get被调用了');
return this.firstname+'-'+this.lastname
}
}二、监视属性(即“侦听属性”)
监视属性watch:
1.当监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视！！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<body>
<div id="root">
<h2>今天天气很{
{info}}</h2>
<button @click='changeWeather'>切换天气</button>
</div>
</body>
<script>
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
}
},
watch:{
isHot:{
immediate:true,//初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}
})
</script>
*监视属性的另一种写法
//监视属性的另一种写法
vm.$watch('isHot',{
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
三、深度监视
1.深度监视
(1).Vue中的watch默认不检测对象内部值的改变（一层）
(2).配置deep:true可以检测对象内部值改变（多层）
备注：
(1).Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视
案例：
<body>
<div id="root">
<h2>今天天气很{
{info}}</h2>
<button @click='changeWeather'>切换天气</button>
<hr>
<h3>a的值是{
{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<hr>
<h3>b的值是{
{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click='numbers={a:100,b:900}'>彻底替换掉numbers</button>
</div>
</body>
<script>
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
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)
}
},
//监视多级结构中某个属性的变化
'numbers.a':{
handler(){
console.log('a被调用了')
},
//监视多级结构中所有属性的变化
numbers:{
deep:true,//开启深度监视
handler(){
console.log('numbers改变了')
}
}
}
})
</script>
2.深度监视的简写
(1).写法一
正常写法：
watch:{
//正常写法
isHot:{
immediate:true,//初始化时让handler调用一下
deep:true,//深度监视
//handler什么时候调用？当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}简写：
watch:{
//简写，配置项中只需要handler时可以简写
isHot(newValue,oldValue){
console.log('isHot被修改了')
}
}(1).写法二
正常写法：
vm.$watch('isHot',{
immediate:true,
deep:true,
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
)简写：
vm.$watch('isHot',function (newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
})3.computed和watch之间的区别
(1).区别
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如，watch可以进行异步操作
(2).两个重要的小原则
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数
这样this的指向才是vm或组件实例对象
将上例修改：
watch:{
firstName(newValue){
//使用箭头函数改变this指向
setTimeout(()=>{
console.log(this);
this.fullName = newValue + '-' + this.lastName
},1000)
},
lastName(newValue){
this.fullName = this.firstName + '-' + newValue
}
}