381vue之监听watch：数据持久化，监听基本数据类型，监听对象，计算属性和watch的区别1、数据持久化 (本地存储) 1. 可以在数组的`增删改`, 都要保存⼀下, ⽐较繁琐
2. 监听数组的变化, 数组⼀旦发⽣变化, 在监听⾥⾯保存⼀下(代码写⼀遍就可以了) vue 提供了⼀个.
TodoMVC 数据持久化
需求 : 将todoMVC中的数据, 保存到本地存储中 (本地持久化)
1. 何时存储数据?
因为功能中的 CRUD 都会修改 list 数据，所以，只要 list 数据发⽣改变, 就要保存到本地存储中;
⽅法⼀ : 在 CRUD 中分别调⽤保存数据的⽅法,(不推荐太繁琐)
⽅法⼆ : 想办法监听 list 数据的改变，只要 list 数据变了, 就调⽤保存数据的⽅法
可以使⽤ vue 的 watch 监听 list 的数据改变
2. 存储值
监听数组和监听对象⼀样需要深度监听
保存值, 记得把对象转化为字符串(存的快省空间)
// 监听
watch: {
// 监听list
todoList: {
deep: true,
handler(newVal) {
// console.log('发⽣变化了', newVal)
// 保存起来
localStorage.setItem('todoList', JSON.stringify(newVal))
}
}
}
3. 取值 , 在 data 中可以初始值
记得给⼀个默认值空数组 []
const todoList = JSON.Item('todoList')) || [],
2、说明
Vue 中可以通过 watch 配置项, 来监听 vue 实例中数据的变化
3、基本使⽤
watch: {
/
/ 监听name属性的数据变化
// 作⽤ : 只要name的值发⽣变化，这个⽅法就会被调⽤
// 第⼀个参数 : 新值
// 第⼆个参数 : 旧值，之前的前
name(newVal,oldVal){
console.log('新 :',newVal);
theyoungfamilyconsole.log('旧 :',oldVal);
}
}
4、基本使⽤案例
需求 : 监听⽤户名⽂本框字符个数(3-6)，并显⽰格式验证
<input type="text" v-model="name" />
<span v-show="isShow">⽤户名的字符在 6-12之间</span> if
(/^[0-9a-zA-Z]{3,6}$/.test(newVal)) { 验证 }
5、监听对象 (数组也属于对象)
// data :
data: {
obj: {
name: 'zs'
}
},
// 组件
<input type="text" v-model="obj.name" />
// 监听
6、开始监听对象的属性
// 从对象的⾓度来监听的
因为对象和数组都是引⽤类型, 引⽤类型变量存的是地址, 地址没有变, 所以不会触发watch obj: {
// 深度监听属性的变化
deep: true,
// ⽴即处理进⼊页⾯就触发
immediate: true,
// 数据发⽣变化就会调⽤这个函数
handler(newVal) {
console.log(newVal.name);
}
},
// 从属性的⾓度来监听
'obj.name'(newVal) {
console.log('监听对象的属性', newVal);
}
7、计算属性和watch的区别
computed 和 watch的区别
computed : 计算属性
- 1.根据已知值 ，得到⼀个新值
-
2. 新值随着已知值(相关的数据)变化⽽变化
（1）计算属性 ==> (得到的是)新值
（2）计算属性(num) ==> 是别⼈影响了我
watch :
1. 监听 ==> (监听)已知值
西南宽频2. 监听数据 (num2) => 是我影响到了别⼈
8、命名规则 : 数字字母 _ $
let xxx = 'sex'
let obj = {
'mg-name': 'zs',
age: 20,
/
/ sex : '男'
[xxx] : '男'
}
05-的基本使⽤-我的.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1>{{ num }}</h1>
<button @click="fn">按钮</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num: 100,
msg: {}
},
methods: {
fn() {
for (let i = 0; i < 5; i++) {
this.num++
}
}
},
watch: {
num(newVal, oldVal) {
console.log(`新值是：${newVal}，旧值是：${oldVal}`); // 新值是：105，旧值是：100
}
}
})
</script>
</body>
</html>
<script>
</script>
06-监听复杂类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="obj.name" />
</div>
<script src="./vue.js"></script>
<script>
调度指挥系统const vm = new Vue({
el: '#app',
data: {
obj: {
name: 'zs'
}
},
/
/ 监听
watch: {
// 监听 obj ，如果监听成功 newVal 就是obj的最新值 newVal 也是对象
// 因为obj是复杂类型引⽤类型，直接这么写，监听的是对象的地址【所以只有地址发送改变时，才会监听到。】 // obj(newVal) {
// console.log(newVal.name)
// }
// ⽅式1 : 监听对象+ 深度监听【注意语法】
obj: {
deep: true, // 深度监听
immediate: true, // ⽴即监听
// 处理
handler(newVal) {
console.log(newVal.name)
}
},
// ⽅式2: 简单粗暴的直接监听对象⾥的属性(name)
'obj.name' (newVal) {
console.log(newVal)
}
}
})
</script>
</body>
</html>
08-的⼩案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
需求 : 监听⽂本框内容的字符串长度 (3-6) , 如果超过范围，提⽰格式不正确 -->
<div id="app">
<input type="text" v-model="msg" />
<span v-show="isShow">格式不正确</span>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
东京国际动漫节
el: '#app',
data: {
msg: '',
isShow: false
},
watch: {
msg(newVal) {
if (newVal.length >= 3 && newVal.length <= 6) {
console.log('格式正确')
明星网
this.isShow = false
现代主义美术} else {
console.log('格式不正确')
this.isShow = true
}
}
}
})
</script>
</body>
</html>
09-计算属性和的区别.html
<!DOCTYPE html>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议