文章目录
一、计算属性
1. 姓名案例 —— 插值语法实现
<div id="root">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
{
{
firstName}}{
{
lastName}}
</div>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
}
})
2. 姓名案例 —— methods实现
<div id="root">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
全名：{
{
fullName()}}
</div>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
methods:{
fullName(){
return this.firstName + this.lastName
}
}
})
3. 姓名案例 —— 计算属性实现
- 什么是计算属性？
要用的属性不存在，要通过已有属性计算得来。
- 原理是什么？
底层借助了
Object.defineproperty方法提供getter和setter。
- get 什么时候执行？
初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。
- 有什么优势？
与
methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
- 注意点：
- 计算属性最终会出现在
vm上，直接读取使用即可。- 如果计算属性要被修改，那必须写
set函数去响应修改，且要引起计算时依赖的数据发生改变。
<div id="root">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
全名：{
{
fullName}}
</div>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName: {
get(){
return this.firstName + this.lastName
},
set(value){
console.log('set被调用了', value);
const arr = value.split('-') //把输入的姓名以-为表示分隔开 (比如：李-四)
this.firstName = arr[0] //李
this.lastName = arr[1] //四
}
}
}
})
4. 姓名案例 —— 计算属性实现（简写方式）
当不用 set 时可以简写。
<div id="root">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
全名：{
{
fullName}}
</div>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName(){
return this.firstName + this.lastName
}
}
})
二、监听属性
1. 天气案例（计算属性实现）
- 利用 methods 里面的方法来控制
isHot的布尔值。- 利用计算属性，以
isHot的布尔值为标准，写三元表达式来改变天气。
<div id="root">
<h1>今天天气很{
{
info}}</h1>
<button @click="changeWeather">点击切换</button>
</div>
const vm = new Vue({
el: '#root',
data: {
isHot: true
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
computed: {
info(){
return this.isHot ? '炎热' : '凉爽'
}
}
})
2. 天气案例（监视属性实现）
- 当被监视的属性变化时，回调函数自动调用，进行相关操作。
- 监视的属性必须存在，才能进行监视。
- 监视的两种写法：
(1). new Vue时传入watch配置
(2). 通过vm.$watch监视
- immediate：该值默认是 false，在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行 handler 中的操作。
- handler：是
watch中需要具体执行的方法。
<div id="root">
<h1>今天天气很{
{
info}}</h1>
<button @click="changeWeather">点击切换天气</button>
</div>
const vm = new Vue({
el: '#root',
data: function () {
return {
isHot: true
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
watch: {
isHot: {
immediate: true, //首次加载时调用
handler(newValue, oldValue) {
console.log('天气被修改了', newValue, oldValue)
}
}
}
})
3. 深度监视（deep）
deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化，数组字符串一般不需要。
<div id="root">
<h2>a 的值是：{
{
numbers.a}}</h2>
<button @click="numbers.a++">点我 a+1</button>
<h2>b 的值是：{
{
numbers.b}}</h2>
<button @click="numbers.b++">点我 b+1</button>
</div>
const vm = new Vue({
el: '#root',
data: function () {
return {
numbers: {
a: 0,
b: 0
}
}
},
watch: {
numbers:{
deep: true,
handler(){
console.log('number改变了')
}
}
}
})
4. 天气案例（监视属性简写）
简写方式
<div id="root">
<h1>今天天气很{
{
info}}</h1>
<button @click="changeWeather">点击切换天气</button>
</div>
const vm = new Vue({
el: '#root',
data: function () {
return {
isHot: true
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
watch: {
isHot(newValue, oldValue){
console.log('isHot被修改了', newValue, oldValue)
}
}
})
5. 姓名案例（watch监听实现）
computed和watch之间的区别：
- computed 能完成的功能，watch 都可以完成。
- watch 能完成的功能，computed 不一定能完成，例如：watch可以进行异步操作。
两个注意点：
- 所有被 Vue 管理的函数，最好写成普通函数，这样this的指向才是 vm 或 组件实例对象。
- 所有不被 Vue 所管理的函数 ( 定时器的回调函数、ajax的回调函数等 )，最好写成箭头函数，这样
this的指向才是 vm 或 组件实例对象。
实例：使用 watch 开启异步任务（延迟效果）：第一个文本框输入的内容，会延迟 1s 呈现在页面，第二个文本框输入的内容，立即呈现。
<div id="root">
姓：<input type="text" v-model="firstName"><br />
名：<input type="text" v-model="lastName"><br />
全名：<span>{
{
fullName}}</span>
</div>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
fullName: '张-三'
},
watch: {
//watch内可以开启异步任务(如延迟显示)，而computed中不可以(因为计算属性中要的就是返回值)
firstName(val) {
setTimeout(() => {
this.fullName = val + '-' + this.lastName
}, 1000)
},
lastName(val) {
setTimeout(() => {
this.fullName = this.firstName + '-' + val
})
},
}
})
不积跬步无以至千里 不积小流无以成江海