文章目录
一、计算属性
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
})
},
}
})
不积跬步无以至千里 不积小流无以成江海