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
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
属性,来给每个循环节点添加一个标识。