共计 15824 个字符，预计需要花费 40 分钟才能阅读完成。
Vue.set 的实现原理
- 给对应和数组自身都减少了
dep属性 - 当给对象新增不存在的属性则触发对象依赖的
watcher去更新 - 当批改数组索引时，咱们调用数组自身的
splice去更新数组（数组的响应式原理就是从新了splice等办法，调用splice就会触发视图更新）
根本应用
以下办法调用会扭转原始数组：
push(),pop(),shift(),unshift(),splice(),sort(),reverse(),Vue.set(target, key, value)
-
调用办法：
Vue.set(target, key, value)target：要更改的数据源(能够是对象或者数组)key：要更改的具体数据value：从新赋的值
<div id="app">{{user.name}} {{user.age}}</div>
<div id="app"></div>
<script>
// 1. 依赖收集的特点：给每个属性都减少一个 dep 属性，dep 属性会进行收集，收集的是 watcher
// 2. vue 会给每个对象也减少一个 dep 属性
const vm = new Vue({
el: '#app',
data: { // vm._data
user: {name:'poetry'}
}
});
// 对象的话：调用 defineReactive 在 user 对象上定义一个 age 属性，减少到响应式数据中，触发对象自身的 watcher，ob.dep.notify()更新
// 如果是数组 通过调用 splice 办法，触发视图更新
vm.$set(vm.user, 'age', 20); // 不能给根属性增加，因为给根增加属性 性能耗费太大，须要做很多解决
// 批改必定是同步的 -> 更新都是一步的 queuewatcher
</script>相干源码
// src/core/observer/index.js 44
export class Observer {// new Observer(value)
value: any;
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep() // 给所有对象类型减少 dep 属性}
}// src/core/observer/index.js 201
export function set (target: Array<any> | Object, key: any, val: any): any {
// 1. 是开发环境 target 没定义或者是根底类型则报错
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 2. 如果是数组 Vue.set(array,1,100); 调用咱们重写的 splice 办法 (这样能够更新视图)
if (Array.isArray(target) && isValidArrayIndex(key)) {target.length = Math.max(target.length, key)
// 利用数组的 splice 变异办法触发响应式
target.splice(key, 1, val)
return val
}
// 3. 如果是对象自身的属性，则间接增加即可
if (key in target && !(key in Object.prototype)) {target[key] = val // 间接批改属性值
return val
}
// 4. 如果是 Vue 实例 或 根数据 data 时 报错,（更新_data 无意义）const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data' +
'at runtime - declare it upfront in the data option.'
)
return val
}
// 5. 如果不是响应式的也不须要将其定义成响应式属性
if (!ob) {target[key] = val
return val
}
// 6. 将属性定义成响应式的
defineReactive(ob.value, key, val)
// 告诉视图更新
ob.dep.notify()
return val
}咱们浏览以上源码可知，vm.$set 的实现原理是：
- 如果指标是数组，间接应用数组的
splice办法触发相应式； - 如果指标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式解决，则是通过调用
defineReactive办法进行响应式解决（defineReactive办法就是Vue在初始化对象时，给对象属性采纳Object.defineProperty动静增加getter和setter的性能所调用的办法）
mixin 和 mixins 区别
mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。
Vue.mixin({beforeCreate() {// ... 逻辑 // 这种形式会影响到每个组件的 beforeCreate 钩子函数},
});
尽管文档不倡议在利用中间接应用 mixin，然而如果不滥用的话也是很有帮忙的，比方能够全局混入封装好的 ajax 或者一些工具函数等等。
mixins 应该是最常应用的扩大组件的形式了。如果多个组件中有雷同的业务逻辑，就能够将这些逻辑剥离进去，通过 mixins 混入代码，比方上拉下拉加载数据这种逻辑等等。
另外须要留神的是 mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。
Vue3.0 和 2.0 的响应式原理区别
Vue3.x 改用 Proxy 代替 Object.defineProperty。因为 Proxy 能够间接监听对象和数组的变动，并且有多达 13 种拦挡办法。
相干代码如下
import {mutableHandlers} from "./baseHandlers"; // 代理相干逻辑
import {isObject} from "./util"; // 工具办法
export function reactive(target) {
// 依据不同参数创立不同响应式对象
return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {if (!isObject(target)) {return target;}
const observed = new Proxy(target, baseHandler);
return observed;
}
const get = createGetter();
const set = createSetter();
function createGetter() {return function get(target, key, receiver) {
// 对获取的值进行喷射
const res = Reflect.get(target, key, receiver);
console.log("属性获取", key);
if (isObject(res)) {
// 如果获取的值是对象类型，则返回以后对象的代理对象
return reactive(res);
}
return res;
};
}
function createSetter() {return function set(target, key, value, receiver) {const oldValue = target[key];
const hadKey = hasOwn(target, key);
const result = Reflect.set(target, key, value, receiver);
if (!hadKey) {console.log("属性新增", key, value);
} else if (hasChanged(value, oldValue)) {console.log("属性值被批改", key, value);
}
return result;
};
}
export const mutableHandlers = {
get, // 当获取属性时调用此办法
set, // 当批改属性时调用此办法
};说说 Vue 的生命周期吧
什么时候被调用？
- beforeCreate：实例初始化之后，数据观测之前调用
- created：实例创立万之后调用。实例实现：数据观测、属性和办法的运算、
watch/event事件回调。无$el. - beforeMount：在挂载之前调用，相干
render函数首次被调用 - mounted：了被新创建的
vm.$el替换，并挂载到实例下来之后调用改钩子。 - beforeUpdate：数据更新前调用，产生在虚构 DOM 从新渲染和打补丁，在这之后会调用改钩子。
- updated：因为数据更改导致的虚构 DOM 从新渲染和打补丁，在这之后会调用改钩子。
- beforeDestroy：实例销毁前调用，实例依然可用。
- destroyed：实例销毁之后调用，调用后，Vue 实例批示的所有货色都会解绑，所有事件监听器和所有子实例都会被移除
每个生命周期外部能够做什么？
- created：实例曾经创立实现，因为他是最早触发的，所以能够进行一些数据、资源的申请。
- mounted：实例曾经挂载实现，能够进行一些 DOM 操作。
- beforeUpdate：能够在这个钩子中进一步的更改状态，不会触发重渲染。
- updated：能够执行依赖于 DOM 的操作，然而要防止更改状态，可能会导致更新无线循环。
- destroyed：能够执行一些优化操作，清空计时器，解除绑定事件。
ajax 放在哪个生命周期？：个别放在 mounted 中，保障逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。复数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不反对 mounted 办法。 什么时候应用 beforeDestroy？：以后页面应用 $on，须要解绑事件。分明定时器。解除事件绑定， scroll mousemove。
那 vue 中是如何检测数组变动的呢？
数组就是应用 object.defineProperty 从新定义数组的每一项，那能引起数组变动的办法咱们都是晓得的， pop、 push、 shift、 unshift、 splice、 sort、 reverse 这七种，只有这些办法执行改了数组内容，我就更新内容就好了，是不是很好了解。
- 是用来函数劫持的形式，重写了数组办法，具体呢就是更改了数组的原型，更改成本人的，用户调数组的一些办法的时候，走的就是本人的办法，而后告诉视图去更新。
- 数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象能力进行观测，观测过的也不会进行观测）
vue3：改用 proxy，可间接监听对象数组的变动。
vue 和 react 的区别
=> 相同点：
1. 数据驱动页面，提供响应式的试图组件
2. 都有 virtual DOM, 组件化的开发，通过 props 参数进行父子之间组件传递数据，都实现了 webComponents 标准
3. 数据流动单向，都反对服务器的渲染 SSR
4. 都有反对 native 的办法，react 有 React native，vue 有 wexx=> 不同点：
1. 数据绑定：Vue 实现了双向的数据绑定，react 数据流动是单向的
2. 数据渲染：大规模的数据渲染，react 更快
3. 应用场景：React 配合 Redux 架构适宜大规模多人合作简单我的项目，Vue 适宜小快的我的项目
4. 开发格调：react 举荐做法 jsx + inline style 把 html 和 css 都写在 js 了
vue 是采纳 webpack + vue-loader 单文件组件格局，html, js, css 同一个文件vue-router 路由钩子函数是什么 执行程序是什么
路由钩子的执行流程, 钩子函数品种有: 全局守卫、路由守卫、组件守卫
残缺的导航解析流程:
- 导航被触发。
- 在失活的组件里调用 beforeRouteLeave 守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创立好的组件实例会作为回调函数的参数传入。
参考：前端 vue 面试题具体解答
理解 nextTick 吗？
异步办法，异步渲染最初一步，与 JS 事件循环分割严密。次要应用了宏工作微工作（setTimeout、promise那些），定义了一个异步办法，屡次调用 nextTick 会将办法存入队列，通过异步办法清空以后队列。
diff 算法
工夫复杂度： 个树的齐全 diff 算法是一个工夫复杂度为 O(n*3），vue 进行优化转化成 O(n)。
了解：
-
最小量更新，
key很重要。这个能够是这个节点的惟一标识，通知diff算法，在更改前后它们是同一个 DOM 节点- 扩大
v-for为什么要有key，没有key会暴力复用，举例子的话轻易说一个比方挪动节点或者减少节点（批改 DOM），加key只会挪动缩小操作 DOM。
- 扩大
- 只有是同一个虚构节点才会进行精细化比拟，否则就是暴力删除旧的，插入新的。
- 只进行同层比拟，不会进行跨层比拟。
diff 算法的优化策略：四种命中查找，四个指针
- 旧前与新前（先比结尾，后插入和删除节点的这种状况）
- 旧后与新后（比结尾，前插入或删除的状况）
- 旧前与新后（头与尾比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧后之后）
- 旧后与新前（尾与头比，此种产生了，波及挪动节点，那么新前指向的节点，挪动到旧前之前）
如何从实在 DOM 到虚构 DOM
波及到 Vue 中的模板编译原理，次要过程：
- 将模板转换成
ast树，ast用对象来形容实在的 JS 语法（将实在 DOM 转换成虚构 DOM） - 优化树
- 将
ast树生成代码
你有对 Vue 我的项目进行哪些优化？
（1）代码层面的优化
- v-if 和 v-show 辨别应用场景
- computed 和 watch 辨别应用场景
- v-for 遍历必须为 item 增加 key，且防止同时应用 v-if
- 长列表性能优化
- 事件的销毁
- 图片资源懒加载
- 路由懒加载
- 第三方插件的按需引入
- 优化有限列表性能
- 服务端渲染 SSR or 预渲染
（2）Webpack 层面的优化
- Webpack 对图片进行压缩
- 缩小 ES6 转为 ES5 的冗余代码
- 提取公共代码
- 模板预编译
- 提取组件的 CSS
- 优化 SourceMap
- 构建后果输入剖析
- Vue 我的项目的编译优化
（3）根底的 Web 技术的优化
- 开启 gzip 压缩
- 浏览器缓存
- CDN 的应用
- 应用 Chrome Performance 查找性能瓶颈
Vue.js 的 template 编译
简而言之，就是先转化成 AST 树，再失去的 render 函数返回 VNode（Vue 的虚构 DOM 节点），具体步骤如下：
首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的形象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创立编译器的。另外 compile 还负责合并 option。
而后，AST 会通过 generate（将 AST 语法树转化成 render funtion 字符串的过程）失去 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚构 DOM 节点，外面有（标签名、子节点、文本等等）
Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？
受古代 JavaScript 的限度，Vue 无奈检测到对象属性的增加或删除。因为 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在能力让 Vue 将它转换为响应式的。然而 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象增加响应式属性，那框架自身是如何实现的呢？
咱们查看对应的 Vue 源码：vue/src/core/instance/index.js
export function set (target: Array<any> | Object, key: any, val: any): any {
// target 为数组
if (Array.isArray(target) && isValidArrayIndex(key)) {// 批改数组的长度, 防止索引 > 数组长度导致 splcie()执行有误
target.length = Math.max(target.length, key)
// 利用数组的 splice 变异办法触发响应式
target.splice(key, 1, val)
return val
}
// key 曾经存在，间接批改属性值
if (key in target && !(key in Object.prototype)) {target[key] = val
return val
}
const ob = (target: any).__ob__
// target 自身就不是响应式数据, 间接赋值
if (!ob) {target[key] = val
return val
}
// 对属性进行响应式解决
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
}咱们浏览以上源码可知，vm.$set 的实现原理是：
- 如果指标是数组，间接应用数组的 splice 办法触发相应式；
- 如果指标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式解决，则是通过调用 defineReactive 办法进行响应式解决（defineReactive 办法就是 Vue 在初始化对象时，给对象属性采纳 Object.defineProperty 动静增加 getter 和 setter 的性能所调用的办法）
Vue 中的 key 到底有什么用？
key 是给每一个 vnode 的惟一 id, 依附 key, 咱们的 diff 操作能够更精确、更疾速 (对于简略列表页渲染来说 diff 节点也更快, 但会产生一些暗藏的副作用, 比方可能不会产生过渡成果, 或者在某些节点有绑定数据（表单）状态，会呈现状态错位。)
diff 算法的过程中, 先会进行新旧节点的首尾穿插比照, 当无奈匹配的时候会用新节点的 key 与旧节点进行比对, 从而找到相应旧节点.
更精确 : 因为带 key 就不是就地复用了, 在 sameNode 函数 a.key === b.key 比照中能够防止就地复用的状况。所以会更加精确, 如果不加 key, 会导致之前节点的状态被保留下来, 会产生一系列的 bug。
更疾速 : key 的唯一性能够被 Map 数据结构充分利用, 相比于遍历查找的工夫复杂度 O(n),Map 的工夫复杂度仅仅为 O(1)
computed 和 watch 的区别和使用的场景？
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值产生扭转，下一次获取 computed 的值时才会从新计算 computed 的值；
watch： 更多的是「察看」的作用，相似于某些数据的监听回调，每当监听的数据变动时都会执行回调进行后续操作；
使用场景：
- 当咱们须要进行数值计算，并且依赖于其它数据时，应该应用 computed，因为能够利用 computed 的缓存个性，防止每次获取值时，都要从新计算；
- 当咱们须要在数据变动时执行异步或开销较大的操作时，应该应用 watch，应用 watch 选项容许咱们执行异步操作 (拜访一个 API)，限度咱们执行该操作的频率，并在咱们失去最终后果前，设置中间状态。这些都是计算属性无奈做到的。
虚构 DOM 实现原理？
虚构 DOM 的实现原理次要包含以下 3 局部：
- 用 JavaScript 对象模仿实在 DOM 树，对实在 DOM 进行形象；
- diff 算法 — 比拟两棵虚构 DOM 树的差别；
- pach 算法 — 将两个虚构 DOM 对象的差别利用到真正的 DOM 树。
什么是 MVVM？
Model–View–ViewModel（MVVM）是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程形式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表
MVVM 源自于经典的 Model–View–Controller（MVC）模式，MVVM 的呈现促成了前端开发与后端业务逻辑的拆散，极大地提高了前端开发效率，MVVM 的外围是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易治理和应用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口申请进行数据交互，起呈上启下作用
（1）View 层
View 是视图层，也就是用户界面。前端次要由 HTML 和 CSS 来构建。
（2）Model 层
Model 是指数据模型，泛指后端进行的各种业务逻辑解决和数据操控，对于前端来说就是后端提供的 api 接口。
（3）ViewModel 层
ViewModel 是由前端开发人员组织生成和保护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换解决，做二次封装，以生成合乎 View 层应用预期的视图数据模型。须要留神的是 ViewModel 所封装进去的数据模型包含视图的状态和行为两局部，而 Model 层的数据模型是只蕴含状态的，比方页面的这一块展现什么，而页面加载进来时产生什么，点击这一块产生什么，这一块滚动时产生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 能够残缺地去形容 View 层。
MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展示在 View 层，前端开发者再也不用低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架曾经把最脏最累的一块做好了，咱们开发者只须要解决和保护 ViewModel，更新数据视图就会主动失去相应更新。这样 View 层展示的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就齐全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端拆散计划施行的重要一环。
咱们以下通过一个 Vue 实例来阐明 MVVM 的具体实现，有 Vue 开发教训的同学应该高深莫测：
（1）View 层
<div id="app">
<p>{{message}}</p>
<button v-on:click="showMessage()">Click me</button>
</div>（2）ViewModel 层
var app = new Vue({
el: '#app',
data: { // 用于形容视图状态
message: 'Hello Vue!',
},
methods: { // 用于形容视图行为
showMessage(){
let vm = this;
alert(vm.message);
}
},
created(){
let vm = this;
// Ajax 获取 Model 层的数据
ajax({
url: '/your/server/data/api',
success(res){vm.message = res;}
});
}
})（3）Model 层
{
"url": "/your/server/data/api",
"res": {
"success": true,
"name": "IoveC",
"domain": "www.cnblogs.com"
}
}谈一下对 vuex 的集体了解
vuex 是专门为 vue 提供的全局状态管理系统，用于多个组件中数据共享、数据缓存等。（无奈长久化、外部外围原理是通过发明一个全局实例 new Vue）
次要包含以下几个模块：
- State：定义了利用状态的数据结构，能够在这里设置默认的初始状态。
- Getter：容许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到部分计算属性。
- Mutation：是惟一更改 store 中状态的办法，且必须是同步函数。
- Action：用于提交 mutation，而不是间接变更状态，能够蕴含任意异步操作。
- Module：容许将繁多的 Store 拆分为多个 store 且同时保留在繁多的状态树中。
用 VNode 来形容一个 DOM 构造
虚构节点就是用一个对象来形容一个实在的 DOM 元素。首先将 template（实在 DOM）先转成 ast， ast 树通过 codegen 生成 render 函数， render 函数里的 _c 办法将它转为虚构 dom
写过自定义指令吗？原理是什么
答复范例
Vue有一组默认指令，比方v-model或v-for，同时Vue也容许用户注册自定义指令来扩大 Vue 能力- 自定义指令次要实现一些可复用低层级
DOM操作 - 应用自定义指令分为定义、注册和应用三步：
- 定义自定义指令有两种形式：对象和函数模式，前者相似组件定义，有各种生命周期；后者只会在
mounted 和updated时执行
- 注册自定义指令相似组件，能够应用
app.directive()全局注册，应用{directives:{xxx}}部分注册 - 应用时在注册名称前加上
v-即可，比方v-focus - 我在我的项目中罕用到一些自定义指令，例如：
- 复制粘贴
v-copy - 长按
v-longpress - 防抖
v-debounce - 图片懒加载
v-lazy - 按钮权限
v-premission - 页面水印
v-waterMarker - 拖拽指令
v-draggable vue3中指令定义产生了比拟大的变动，次要是钩子的名称放弃和组件统一，这样开发人员容易记忆，不易犯错。另外在v3.2之后，能够在setup中以一个小写v结尾不便的定义自定义指令，更简略了
根本应用
当 Vue 中的外围内置指令不可能满足咱们的需要时，咱们能够定制自定义的指令用来满足开发的需要
咱们看到的 v- 结尾的行内属性，都是指令，不同的指令能够实现或实现不同的性能，对一般 DOM 元素进行底层操作，这时候就会用到自定义指令。除了外围性能默认内置的指令 (v-model 和 v-show)，Vue 也容许注册自定义指令
// 指令应用的几种形式：// 会实例化一个指令，但这个指令没有参数
`v-xxx`
// -- 将值传到指令中
`v-xxx="value"`
// -- 将字符串传入到指令中，如 `v-html="'<p> 内容 </p>'"`
`v-xxx="'string'"`
// -- 传参数（`arg`），如 `v-bind:class="className"`
`v-xxx:arg="value"`
// -- 应用修饰符（`modifier`）`v-xxx:arg.modifier="value"` 注册一个自定义指令有全局注册与部分注册
// 全局注册注册次要是用过 Vue.directive 办法进行注册
// Vue.directive 第一个参数是指令的名字（不须要写上 v - 前缀），第二个参数能够是对象数据，也能够是一个指令函数
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus() // 页面加载实现之后主动让输入框获取到焦点的小性能}
})
// 部分注册通过在组件 options 选项中设置 directive 属性
directives: {
focus: {
// 指令的定义
inserted: function (el) {el.focus() // 页面加载实现之后主动让输入框获取到焦点的小性能
}
}
}
// 而后你能够在模板中任何元素上应用新的 v-focus property，如下：<input v-focus />钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保障父节点存在，但不肯定已被插入文档中)。update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变动。通过比拟更新前后的绑定值，能够疏忽不必要的模板更新。componentUpdated：被绑定元素所在模板实现一次更新周期时调用。unbind：只调用一次，指令与元素解绑时调用。
所有的钩子函数的参数都有以下：
el：指令所绑定的元素，能够用来间接操作 DOM-
binding：一个对象，蕴含以下property：name：指令名，不包含v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否扭转都可用。expression：字符串模式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个蕴含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{foo: true, bar: true}vnode：Vue编译生成的虚构节点oldVnode：上一个虚构节点，仅在update和componentUpdated钩子中可用
除了 el 之外，其它参数都应该是只读的，切勿进行批改。如果须要在钩子之间共享数据，倡议通过元素的 dataset 来进行
<div v-demo="{color:'white', text:'hello!'}"></div>
<script>
Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // "white"
console.log(binding.value.text) // "hello!"
})
</script>利用场景
应用自定义组件组件能够满足咱们日常一些场景，这里给出几个自定义组件的案例：
- 防抖
// 1. 设置 v -throttle 自定义指令
Vue.directive('throttle', {bind: (el, binding) => {
let throttleTime = binding.value; // 防抖工夫
if (!throttleTime) { // 用户若不设置防抖工夫，则默认 2s
throttleTime = 2000;
}
let cbFun;
el.addEventListener('click', event => {if (!cbFun) { // 第一次执行
cbFun = setTimeout(() => {cbFun = null;}, throttleTime);
} else {event && event.stopImmediatePropagation();
}
}, true);
},
});
// 2. 为 button 标签设置 v -throttle 自定义指令
<button @click="sayHello" v-throttle> 提交 </button>- 图片懒加载
设置一个 v-lazy 自定义组件实现图片懒加载
const LazyLoad = {
// install 办法
install(Vue,options){
// 代替图片的 loading 图
let defaultSrc = options.default;
Vue.directive('lazy',{bind(el,binding){LazyLoad.init(el,binding.value,defaultSrc);
},
inserted(el){
// 兼容解决
if('InterpObserver' in window){LazyLoad.observe(el);
}else{LazyLoad.listenerScroll(el);
}
},
})
},
// 初始化
init(el,val,def){
// src 贮存实在 src
el.setAttribute('src',val);
// 设置 src 为 loading 图
el.setAttribute('src',def);
},
// 利用 InterpObserver 监听 el
observe(el){
let io = new InterpObserver(entries => {
let realSrc = el.dataset.src;
if(entries[0].isIntersecting){if(realSrc){
el.src = realSrc;
el.removeAttribute('src');
}
}
});
io.observe(el);
},
// 监听 scroll 事件
listenerScroll(el){let handler = LazyLoad.throttle(LazyLoad.load,300);
LazyLoad.load(el);
window.addEventListener('scroll',() => {handler(el);
});
},
// 加载实在图片
load(el){
let windowHeight = document.documentElement.clientHeight
let elTop = el.getBoundingClientRect().top;
let elBtm = el.getBoundingClientRect().bottom;
let realSrc = el.dataset.src;
if(elTop - windowHeight<0&&elBtm > 0){if(realSrc){
el.src = realSrc;
el.removeAttribute('src');
}
}
},
// 节流
throttle(fn,delay){
let timer;
let prevTime;
return function(...args){let currTime = Date.now();
let context = this;
if(!prevTime) prevTime = currTime;
clearTimeout(timer);
if(currTime - prevTime > delay){
prevTime = currTime;
fn.apply(context,args);
clearTimeout(timer);
return;
}
timer = setTimeout(function(){prevTime = Date.now();
timer = null;
fn.apply(context,args);
},delay);
}
}
}
export default LazyLoad;- 一键 Copy 的性能
import {Message} from 'ant-design-vue';
const vCopy = { //
/*
bind 钩子函数，第一次绑定时调用，能够在这里做初始化设置
el: 作用的 dom 对象
value: 传给指令的值，也就是咱们要 copy 的值
*/
bind(el, { value}) {
el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
el.handler = () => {if (!el.$value) {
// 值为空的时候，给出提醒，我这里的提醒是用的 ant-design-vue 的提醒，你们随便
Message.warning('无复制内容');
return;
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea');
// 将该 textarea 设为 readonly 避免 iOS 下主动唤起键盘，同时将 textarea 移出可视区域
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value;
// 将 textarea 插入到 body 中
document.body.appendChild(textarea);
// 选中值并复制
textarea.select();
// textarea.setSelectionRange(0, textarea.value.length);
const result = document.execCommand('Copy');
if (result) {Message.success('复制胜利');
}
document.body.removeChild(textarea);
};
// 绑定点击事件，就是所谓的一键 copy 啦
el.addEventListener('click', el.handler);
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value}) {el.$value = value;},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {el.removeEventListener('click', el.handler);
},
};
export default vCopy;- 拖拽
<div ref="a" id="bg" v-drag></div>
directives: {
drag: {bind() {},
inserted(el) {el.onmousedown = (e) => {
let x = e.clientX - el.offsetLeft;
let y = e.clientY - el.offsetTop;
document.onmousemove = (e) => {
let xx = e.clientX - x + "px";
let yy = e.clientY - y + "px";
el.style.left = xx;
el.style.top = yy;
};
el.onmouseup = (e) => {document.onmousemove = null;};
};
},
},
}原理
- 指令实质上是装璜器，是
vue对HTML元素的扩大，给HTML元素减少自定义性能。vue编译DOM时，会找到指令对象，执行指令的相干办法。 - 自定义指令有五个生命周期（也叫钩子函数），别离是
bind、inserted、update、componentUpdated、unbind
原理
- 在生成
ast语法树时，遇到指令会给以后元素增加directives属性 - 通过
genDirectives生成指令代码 - 在
patch前将指令的钩子提取到cbs中, 在patch过程中调用对应的钩子 - 当执行指令对应钩子函数时，调用对应指令定义的办法
