携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天点击查看活动详情

vue 监测数据的原理

Vue 会检测data 中所有层次的数据 通过setter 实现监视，且要在new Vue时就传入要监测的数据

1. 对象中后追加的属性，Vue 默认不做响应式处理
2. 如需给后添加属性做响应式：使用 Vue.set 或者 this.$set

监测数组中的数据： Vue通过包裹数组更新元素的方法实现，本质就是：

1. 调用原生对应的方法对数组进行更行
2. 重新解构模版，更新页面 这些被包裹过的方法为：push()、pop() 、 shift()、 unshift()、 splice()、 sort()、reverse()等数组自身方法

收集表单数据

• 若：<input type="text" /> 则 v-model 收集的是 value 值，用户输入的就是 value 值
• 若：<input type="radio" /> 则 v-model 收集的是 value 值，且要给输入的标签配置 value 值 若：<input type="checkbox" />

1、没有配置 input 的 value 属性，那么要收集的就是 checked (勾选或者未勾选，是布尔值)。
2、v-model 的初始值是数组，那么收集的就是 value 组成的数组

v-model 的三个修饰符：

• lazy：失去焦点再收集数据
• number：输入字符串转换为有效数字
• trim：输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)

语法：
1、注册过滤器： `Vue.filter(name, callback)` 或 `new Vue(filters：{ })` 
2、使用过滤器：`{{ xxx | 过滤器名}}` 或 `v-bind: 属性 = “xxx | 过滤器名”`

过滤器可以接收额外参数，多个过滤器也可以串联 并不改变原本的数据，是产生新的对应的数据

自定义指令

自定义指令函数何时被调用： 指令与元素成功绑定时、 指令所在的模板重新解析时

局部指令

new Vue({
    directives: {
        指令名： 配置对象，
    }
})       
// 或者(函数写法)
new Vue({
    directives(){ }
})

全局指令

    vue.directive(指令名：配置对象)
    //或者
    vue.directive(指令名，回调函数)

配置对象中的 3 个回调

1. bind：指令与元素成功绑定时调用
2. inserted：指令所在元素插入页面时调用
3. update：指令所在模版被重新解析时调用 指令定义时不加 v-，但在调用时要加上。 指令名如果是多个单词，要使用 kebab-case 命名方式，不要用 驼峰命名。