事件处理与响应式数据监听

kaikeba.com/

Vue基础 - 事件处理与响应式数据监听

1、模板与渲染

• 每一个独立的组件模板有且仅有一个顶层父级元素。
• 因为组件挂载的时候是使用解析生成的结构替换掉挂载点的元素，所以挂载点不推荐使用 html 和 body 这两个元素，所以我们通常会指定 body 中的一个空白元素作为整个应用的顶层组件容器。

1-1、el 选项

根组件可以指定 el 选项来绑定挂载点。

• 自动调用 $mount。
• 指定 el 同时又没有指定 template ，则把 el 的 outerHTML 作为 template。

1-2、render 选项

先了解一下 虚拟 DOM。

1-3、虚拟 DOM

1-3-1、原生 DOM 对象

• 结构信息复杂
• 操作耗时
• 消耗资源
• ……

1-3-2、Virtual DOM

通过原生的纯对象来间接描述一个真实 DOM 对象，只提供必要的信息，同时在需要更新的时候，会加入一些算法（diff）来比较上一次的 VDOM 与 更新后的 VDOM 之间的差异，找出确实需要更新点，最后再统一反馈去更新对应的真实 DOM。

1-4、render 函数

Vue 提供的一个用于直接返回 VDOM 的渲染函数，该函数的第一个参数是 Vue 内置的一个 VDOM 构建函数：createElement

createElement

1-4-1、执行流程

html -> AST -> 生成渲染函数 -> vNode -> DOM

2、数据定义

2-1、data 的对象模式

let data = {
  a: 1
};

let app1 = new Vue({
  data
});

let app2 = new Vue({
  data
});

app1.a = 100;
// app2 data 中的数据也会被修改
app2.a //100

2-2、data 的函数模式

let data = function() {
  return {
    a: 1
  }
}

let app1 = new Vue({
  data
});

let app2 = new Vue({
  data
});

app1.a = 100;
// app2 data 中的数据不会被修改
app2.a //1

2-3、命名空间

• data、methods、computed、props 中定义的数据都会被挂载到组件实例上，以便访问，但同时也带来一个问题，它们之间在定义数据的时候就会出现冲突问题，所以在以上选项中定义数据的时候要格外注意。
• 同时在 Vue 实例本身会有许多内置属性和方法，所以在定义用户数据的时候也要注意不要与 Vue 实例原有的内置属性和方法冲突。
  • _ 开始的为内部调用属性和方法，不建议用户代码直接调用。
  • $ 开始的为对外提供的 API ，用户代码可以调用，如：app.$data。

2-4、响应式数据

Vue2 中响应式数据实现是建立在 Object.defineProperty 方法上，由于该方法的本身的一些特性，在拦截数据处理上会有一些问题需要注意：

• 对象新增属性无法拦截。
• 数组变动无法拦截：
  • 利用索引直接设置一个数组项时。
    • 解决：Vue.set()、(new Vue()).$set()，两者等价。
  • 修改数组的长度时。
    • 解决：方法变异（Vue 内部已处理）。

2-5、computed

2-5-1、简写

计算属性函数是一个 getter setter 函数，如果计算属性只有 getter 需求，则可以简写为一个函数。

2-5-2、缓存

计算属性的值依赖计算函数中依赖的其它响应式数据，如果依赖的其它响应式数据没有发生变化，计算属性的值可以缓存，得到结果是最近一次变化产生的值。

2-6、watch

2-6-1、多层监听

对于多层数据的监听，可以使用字符串+点语法。

watch: {
  'a.b.c': function() {
    //...
  }
}

2-6-2、深度监听

默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听，可以使用下面的形式：

watch: {
  a: {
    handler() {
      console.log('a deep');
    },
    deep: true
  }
}

3、指令

3-1、指令修饰符

一个指令可以包含的内容包括：

• 指令名称
• 指令值
• 指令参数
• 指令修饰符

<组件 指令:参数.修饰符1.修饰符2="值" />

.lazy

取代 input 监听 change 事件

.number

输入字符串转为有效的数字

.trim

输入首尾空格过滤

3-1-1、事件系列修饰符：

.stop

.prevent

.capture

.self

.once

.passive

3-2、:key 属性

默认情况下，在渲染 DOM 过程中使用 原地复用 ，这样一般情况下会比较高效，但是对于循环列表，特别是依赖某种状态的列表，会有一些问题，我们可以通过 :key 属性，来给每个循环节点添加一个标识。

kaikeba.com/