目录
一、计算属性--姓名案例
1.函数和插值语法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 容器 -->
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
全名：<span> {{fullName()}}</span>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
methods:{
fullName(){
return this.firstName+'-'+this.lastName
}
}
})
</script>
</body>
</html>2.计算属性实现
计算属性：
定义：要用的属性不存在，要通过已有的属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行？
初次读取时会执行一次
当依赖的数据发生变化时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：①计算属性最终会出现在vm上，直接读取使用即可
②如果计算属性要被修改，那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 容器 -->
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
全名：<span> {{fullName}}</span>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
//计算属性
computed:{
fullName:{
// get有什么作用？当有人读取fullName时，get就会被调用，且返回值就会作为fullName的值
//get什么时候调用？1.初次读取fullName时 2.所依赖的数据发生变化时
get(){
// 在这里面的this同样指向vm实例对象
return this.firstName+'-'+this.lastName
},
// 一定要有setter函数么？不一定，如果确定数据只需要读的话，不需要setter函数
// get什么时候调用？当fullName被修改的时候
set(value){
const arr=value.split('-')
this.firstName=arr[0]
this.lastName=arr[1]
}
}
}
})
</script>
</body>
</html>计算属性的简写
//计算属性
computed:{
//简写之后不用再把fullName写成一个配置对象了
// 这个函数就当getter用 函数的名就是计算属性的名
fullName(){
// 在这里面的this同样指向vm实例对象
return this.firstName+'-'+this.lastName
}
}二、监视属性---天气案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气：{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
})
</script>
</body>
</html>最终实现的效果如下，当我们点击“切换天气”的时候，就会改变
1.使用监视属性编写天气案例
方法一：
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
// 监视谁我们就写谁的名字
isHot:{
// 初始化时让handler函数调用一下
immediate:true,
// 此函数什么时候被调用？当我们被监视的isHot改变时
// 此函数有两个参数，一个参数是新值，另一个参数是老值（之前的值
handler(newValue,oldValue){
console.log('isHot被修改了')
}
}
} 方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气：{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
vm.$watch('isHot',{
immediate: true,
handler(newValue,oldValue){
console.log('isHot被修改了')
}
})
})
</script>
</body>
</html>2.深度监视
深度监视：
Vue中的watch默认不监测对象内部值的改变（一层）
配置deep：true可以检测对象内部值改变（多层）
备注：
Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！
使用watch时根据数据的具体结构，是否采用深度监视
监视多级结构中某个属性的变化
监视number中的a的变化
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},为什么这个地方会有引号？没有行不行？
不行！因为这才是正统的写法，没有引号的那种是简写形式
'numbers.a':{
// 如果没有这个函数的话会被警告
handler(){
console.log('a被改变了！')
}
}监视多级结构中所有属性的变化（深度监视）
开启深度监视，当number中的任何一个配置变了之后，就会运行handler函数
deep:true,
watch:{
isHot:{
immediate:true, //初始化时让handler调用一下
// handler什么时候调用？当isHot发生变化时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
numbers:{
// 开启深度监视，当number中的任何一个配置变了之后，就会运行handler函数
deep:true,
handler(){
console.log('numbers changes')
}
}
}
3.监视属性简写
完整版
watch:{
isHot:{
immediate:true, //初始化时让handler调用一下
// handler什么时候调用？当isHot发生变化时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}简写版
简写的代价就是不能配置immediate和deep
watch:{
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
三、computed与watch对比
区别：
computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作
两个重要原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.所有不被vue所管理的函数（定时器的回调函数、AJAX的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象
使用watch监听--姓名案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 容器 -->
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
全名：<span> {{fullName}}</span>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName:{
// 此处的newValue就是我们新输入的姓
handler(newValue,oldValue){
this.fullName=newValue+'-'+this.lastName
}
},
lastName:{
// 此处的newValue就是我们新输入的名
handler(newValue,oldValue){
this.fullName=this.firstName+'-'+newValue
}
}
}
})
</script>
</body>
</html>