一 . 计算属性
(1) 作用 : 解决模板语法代码冗余问题
(2) 语法 : computed : {
计算属性名(){
return 计算属性值
}
}
(3) 注意点 : a. 计算属性要写在vue实例computed中
b. 计算属性函数一定要有返回值
(4) 计算属性的缓存机制 :
a. 当第一次使用计算属性的时候, vue会调用一次函数。然后把函数名和返回值平铺到vue实例中。
b. 之后使用计算属性, vue不会调用这个函数,而是从缓存中直接读取。
c. 只有当计算属性内部的数据发生变化的时候,才会重新执行一次这个函数,然后又放入缓存
(5) 代码演示 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<p>{{ msg }}</p>
<p>{{ revMsg }}</p>
<p>{{ revMsg }}</p>
<p>{{ revMsg }}</p>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
// 1. el:挂载点
el: '#app',
// 2.data: 要渲染的数据
data: {
msg: '我爱敲代码',
},
// 3.methods:事件方法
// 4.computed:计算属性
computed:{
revMsg(){
console.log(1)
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
二 . 侦听器
(1) 作用 : 监听某一个数据变化
(2) 语法 : watch : {
要侦听的属性名 (newVal,oldVal) {
}
}
(3) 代码演示 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
用户名: <input type="text" placeholder="请输入用户名" v-model="username"><span>{{ info }}</span>
<br>
密码: <input type="text" placeholder="请输入密码" v-model="password">
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
username: '',
password: '',
info:''
},
//计算属性
watch: {
username(newVal, oldVal) {
console.log(newVal, oldVal)
this.info = '验证中...'
//模拟网络请求
setTimeout(()=>{
this.info = '该用户已被注册'
},500)
}
}
})
</script>
</body>
</html>
(4) 深度侦听 :
a. 作用 : 侦听引用类型内部数据变化
b. 语法 :
watch: {
"要侦听的属性名": {
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {}
}
}
c. 代码演示 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
用户名: <input type="text" placeholder="请输入用户名" v-model="user.username"><span>{{ info }}</span>
<br>
密码: <input type="text" placeholder="请输入密码" v-model="user.password">
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
user: {
username: '',
password: ''
},
info: ''
},
//计算属性
watch: {
user: {
deep: true,
handler(newVal, oldVal) {
console.log(newVal, oldVal)
this.info = '验证中...'
//模拟网络请求
setTimeout(() => {
this.info = '该用户已被注册'
}, 500)
}
}
}
})
</script>
</body>
</html>
三 . 计算属性与侦听器的区别 :
(1) 功能不同 : 计算属性是解决模板语法冗余,而侦听器是监听data中某一个数据的变化
(2) 计算属性有缓存,侦听器没有缓存
(3) 计算属性不支持异步操作,侦听器支持异步操作
(4) 计算属性可以新增一个属性,而侦听器一般监听data中的属性,或者监听路由