1. 监听(watch): 监听一个属性的变化
-
监事属性
watch:- 当监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进入监视
- 监视的两种写法：
new Vue时传入watch配置- 通过
vm.$watch()监视
immediate初始化时让handler调用一下
-
深度监视：
Vue中的watch默认不监视对象内部值的变化（只监视一层）- 配置
deep:true可以监视对象内部值变化（多层）
-
备注：
Vue自身可以监视对象内部值得变化，但Vue提供的watch默认不可以- 使用
watch时，根据数据的具体结构，决定是否采用深度监听 - 简写：当确定不使用
immediate和deep属性时可以简写
一、监听
1.
const vm = new Vue({
el: "#app",
watch:{
immediate: true, // 初始化时让handler调用一下
deep: true, // 深度监听
handler(newValue, oldValue){
console.log(newValue, oldValue)
}
}
})
2.
vm.$watch('isSHow',{
immediate: true, // 初始化时让handler调用一下
deep: true, // 深度监听
handler(newValue, oldValue){
console.log(newValue, oldValue)
}
})
二、简写
1.
const vm = new Vue({
el: "#app",
watch:{
isShow(newValue, oldValue){
console.log(newValue, oldValue)
}
}
})
2.
vm.$watch('isSHow', function(newValue, oldValue){
console.log(newValue, oldValue)
})
-
计算属性
（computed）、方法methods、监听（watch）的区别?computed、watch、methods专人干专事- 计算属性
computed:- 目的是得到一个计算结果，必须要有return，一个状态值受多个状态值影响。
- 有缓存，当依赖状态值变化是，才会重新计算。
- 不能异步
- 本身不支持传参，可以使用闭包
- 事件
methods：- 绑定的事件处理，非必须
return - 没有缓存
- 绑定的事件处理，非必须
- 监听
watch:- 一个状态的改变 影响多条数据，没有
return - 没有缓存
- 可以异步
- 不传参
- 一个状态的改变 影响多条数据，没有
- 计算属性
2. class和style绑定
class样式 写法：:class = "xxx",xxx可以是字符串、对象、数组- 字符串写法适用于：类名不确定，要动态获取
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定
style样式
:style = "{fontSize: xxx}" 其中xx是动态的
:style = "[a, b]" 其中a, b是样式对象
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<style>
/* #region */
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green
}
.yellow{
color: yellow
}
/* #endregion */
.bold{
font-weight: bold;
}
.size{
font-size: larger;
}
</style>
</head>
<body>
<div id="app">
<!-- 1. 绑定字符串 -->
<!-- 1.1.1 固定切换class名称 -->
<p :class="name">这是一个动态class</p>
<button @click="changClass">点击单次切换class名</button>
<br>
<!-- 1.1.2 随机切换class名称 -->
<!-- class 和:class 可以绑定多个class名称 -->
<p class="bold" :class="name">这是一个动态class</p>
<button @click="changClass2">点击数组切换class名</button>
<br>
<!-- 1.1.3 三元表达式表达式切换class名称 -->
<p :class="isName ? 'red' : 'blue'">这是一个动态class</p>
<button @click="isName = !isName">表达式切换class名</button>
<hr>
<!-- 2. 绑定对象 -->
<!-- <p :class="{bold: true, size: false}">这是一个对象绑定的class类名</p> -->
<p :class="objClass">这是一个对象绑定的class类名</p>
<button @click="objClassChange">表达式切换class名</button>
<hr>
<!-- 3. 绑定数组 -->
<!-- <p :class="['blue', 'bold', 'size']">这是一个对象绑定的class类名</p> -->
<p :class="arrClass">这是一个对象绑定的class类名</p>
<button @click="arrClassChange">表达式切换class名</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'red',
isName: true,
arr:['red', 'blue', 'green'],
// 对象class名称
objClass:{
red: true,
bold: true
},
// 数组class名称
arrClass:[ 'blue', 'bold', 'size']
},
methods: {
// #region 字符串绑定
changClass(){
this.name = 'blue'
},
changClass2(){
const a = Math.floor(Math.random() * 3)
console.log(this.arr[a]);
this.name = this.arr[a]
},
// #endregion
objClassChange(){
// this.objClass.size = true
// 解决方法 $set方法
// this.$set(this.objClass, 'size', true)
Vue.set(this.objClass, 'size', true)
},
arrClassChange(){
// this.arrClass.splice(0, 1, 'yellow')
// 存在问题？为何vm中的arrClass值改变了，页面却没有渲染 => Vue内部监视原理
// this.arrClass[0] = 'yellow'
// 解决方法
// this.$set(this.arrClass, 0, 'yellow')
this.$set(this.arrClass, 0, 'yellow')
}
},
})
</script>
</body>
</html>
3. set方法
Vue会监视data中所有层次的数据。- 如何监视对象的数据？ 通过
setter实现监视，且要在new Vue时就传入要监测的内容- 对象中后追加的属性，
Vue默认不做响应式处理 - 如需要给后添加的属性做响应式，使用如下
API:
- 对象中后追加的属性，
Vue.set(target, propertyName/index, value)
vm.$set(target, propertyName/index, value)
- 如何监视数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做两件事
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
- 在Vue修改数组中的某个元素一定要用如下方案：
- 使用这些API：
push(), pop(), shift(), unshift(), sort(), reverse(), splice()
- 使用这些API：
Vue.set()或者vm.$set()- 特别注意：Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性！！
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{ obj }}
<button @click="changeObj">点击改变obj值</button>
<hr>
{{ arr }}
<button @click="changeArr">点击改变arr值</button>
<hr>
{{ arr2 }}
<span v-once>{{ arr2 }}</span>
<button @click="changeArr2">点击改变arr顺序sort方法</button>
<hr>
{{ arr3 }}
<button @click="changeArr3">点击翻转arr</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data:{
obj:{
name: '小明'
},
arr:['小亮', 10],
arr2:[ 10, 40, 5, 30],
arr3:[ 1, 2, 3, 4]
},
methods: {
changeObj(){
// this.obj.banji = 'xx班级'
// 解决方法
// this.$set(this.obj, 'banji', 'xx班级')
Vue.set(this.obj, 'banji', 'xx班级')
},
changeArr(){
// this.arr[0] = '小白'
// 解决方法一： set
// this.$set(this.arr, 2, 'xx班级')
// Vue.set(this.arr, 2, 'xx班级')
// this.arr[2] = '小白'
// 解决方法二：内置函数
// 1. 数组后添加值
// this.arr.push('小白')
// 2. 数组后删除值
// this.arr.pop()
// 3. 从头往后删除数组
// this.arr.shift()
// 4. 数组前面加值
// this.arr.unshift('小小')
},
// 数组排序
changeArr2(){
// 5. sort()
// 正序
this.arr2.sort((a,b) =>{
console.log('--');
console.log(a, b);
return a-b
})
// this.arr2.sort((a,b) =>{
// return b - a
// })
},
// 翻转数组
changeArr3(){
// this.arr3.reverse()
// this.arr3.splice(1, 2, 'a', 'b', 'v')
// 注意: 禁止给vm或者vm的跟数据对象添加属性
// console.log(vm._data)
// this.$set(vm._data, 'name', 'ssss')
// this.$set(vm, 'name', 'ssss')
}
},
})
</script>
</body>
</html>