13.Vue检测数据的原理
1.vue会监视data中所有层次的数据。
- 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
- 如何监测数组中的数据？
通过包裹数组更新元素的方法实现(重写了数组的方法，Vue将data中的数组进行了原型链重写（push,pop,shift,unshift,splice...）,指向了自己定义的数组原型方法),本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！
splice(index，删除的数量，切换的新值) 可以用于删除数组中的指定元素，里面三个参数
14.收集表单数据
14.1 实例
<form>
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select><br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
效果：
总结：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
14.2 v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
15.过滤器
定义： 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}}或v-bind:属性 = "xxx | 过滤器名"
示例：
局部过滤器
<div id="root">
<input type="text" v-model="msg" />
//过滤器第一种写法(常用)
{{msg| 过滤器名称 }}
</div>
var vm=new Vue({
el:"#root",
data:{
msg:'HAOYUE'
},
filters: {
过滤器名称: function (value) {
if (!value) return ''
...
return value
}
}
})
全局过滤器
//过滤器第二种写法
<h3 :x="msg | 过滤器名称">皓月</h3>
Vue.filter('过滤器名称'，function(value){
if (!value) return ''
...
return value
})
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
//过滤器实现（传参）
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
//过滤器第一个参数一定是过滤器管道符前的数据
//第二个参数:如果有值就用传过来的没有就用等号后面的
Vue.filter('timeFormater',function(value,str='YYYY年MM月DD日 HH:mm:ss'){
return dayjs(value).format(str)
})
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
2.并没有改变原本的数据, 是产生新的对应的数据
16.生命周期
生命周期：
- 又名：生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么：Vue在关键时刻(Vue实例从创建到销毁)帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm(vue实例对象)或组件实例对象。
原理图
**简记：常用的有八个且成对出现——创建、挂载、更新、销毁
补充3个生命周期钩子：
1.nextTick：当数据更新且真实dom渲染完成时触发
路由组件独有的两个钩子：
2.activated路由组件被激活时触发
3.deactivated路由组件失活时触发
常用的生命周期钩子：
mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息。
- 销毁后自定义事件会失效，但原生DOM事件依然有效(如:@click)。
- 一般不会在
beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
