-
vue父子组件生命周期调用顺序
加载渲染过程 和先序深度遍历顺序有关
父beforeCreate-->父created --> 父beforeMount -->子beforeCreate -->子created-->子beforeMounted -->子mounted-->父mounted
子组件更新过程
父boforeUpdate -->子boforeUpdate-->子updated-->父updated
父组件更新过程
父beforeUpdate-->父uptated
销毁过程
父beforeDestory-->子beforeDestory-->子desroyed-->父destoryed
理解：
组件的调用顺序都是先父后子，渲染完成的顺序肯定是先子后父
组件的销毁操作是先父后子，销毁完成的顺序是先子后父 -
vue中相同的逻辑如何抽离
vue.mixin 用法 给组件每个生命周期，函数都混入一些公共逻辑 -
为什么使用异步组件 异步组件是一个函数
import() 如果组件功能多打包的结果会变大，可以采用异步方式加载组件，实现文件的分割加载 -
插槽与作用域插槽区别
创建组件虚拟节点时，会将组件的儿子的虚拟节点保存起来，当初始化组件时，通过插槽属性将儿子进行分类{a:[vnode],b:[vnode]}
渲染组件时会拿对应的slot属性的节点进行替换操作（插槽的作用域为父组件）
作用域插槽
在解析的时候，不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会通知此函数进行渲染（插槽的作用域为子组件） -
keep-alive
缓存组件，当组件切换时不会对当前组件进行卸载，常用的2个属性 include.exclude 2个生命周期 actived deactived -
hash路由和history路由
-
vue-router 中的导航守卫有哪些 完整的导航解析流程
-
vuex action 和 mutation区别
mutation 是同步更新数据 用的$watch
action 是异步操作 -
vuex工作原理
-
箭头函数 与this ，能否用 new执行？
1 没有自己的this，继承的上下文的this，call apply 所以不能改变this
2 箭头函数中没有arguments，只能通过…arg获取传递的参数数组
3 箭头函数 没有prototype ，没有this ，所以不能用new
- 编码优化
1 不要将所有的数据都放到data中，data中的数据都会增加getter和setter，会收集对应的watcher
2v-for 绑定事件时用事件代理
3 spa页面采用 keep-alive 缓存组件
4 拆分组件 提高复用
5 key 写上
6 object.freeze 冻结数据 静态数据可以冻结一下
7 合理使用懒加载 异步组件
8 数据持久化问题 - vue 加载性能优化
长列表插件 vue-virtual-scroll-list
图片懒加载 vue-lazyload
用户体验
app-skeleton 骨架屏 先显示个框
app-shell APP壳 先显示个导航等
pwa 离线缓存 用的很少了
SEO优化
预渲染插件 prerender-spa-plugin
服务端渲染 ssr
- 2. async await promise setTimeout 执行顺序 事件循环
微任务 async 中的 await promise 中的resolve reject
宏任务 ajax setTimeout 事件绑定 - 3.
var a = {
i:1,
toString(){ // 对象中的方法
return this.i++
},
aa:()=>{ //与上一个写法区别？ 这种是为了箭头函数写法
console.log(2)
}
}
if(a ==1 && a == 2 && a ==3){
console.log(1)
}
- 4. 脚手架配置 webpack 配置都有哪些
- 5. vue 2.0 3.0 双向数据绑定原理
2.o 缺点 1 需要对原始数据克隆一份 2 还得对每一个属性分别设置Object.definePrototype 3 数据都需要先声明到data中
2.0 Object.definePrototype 来数据劫持的，大概逻辑是… 3.0 proxy 拦截器 来做的，相对于2.0 有哪些提升？
以上缺点 proxy都解决了
var obj = {name:'',age:22}
obj = new Proxy(obj,{
get(target,prop){
return target[prop]
},
set(target,prop,value){
target[prop] = value
}
})
双向绑定 就是监听 onchange oninput 事件呗 mvc比mvvm 少了一层，视图更改，更新数据 就是监听input change事件
- 6 跨域解决方案 实现原理
jsonp 只支持get 有缓存 不安全 现在几乎不用了，之前用
CORS 跨域资源共享 全都在 服务器端设置就好 缺点 只能写一个域 ，token 上送有点问题
proxy 代理 webpack 中配置 proxy + nginx反向代理 - 7. 组件通信 集合
属性传递 只能父传子
发布订阅 (eventBus)emit 子改父 自己写就是callback 回调函数
Provide/inject 祖先与后代传递信息 通过上下文传递
Slot
children
Vuex 公共状态管理（一刷新就没了） 或者localstorage 本地存储，得设置一个过期限制 - 8 diff 算法 事件复杂度 和算法原理
两个数的完全的diff算法事件复杂度o（n3）,vue 中做了优化，值对同级的元素进行比较，时间复杂度为o(n)
先同级比较，再比较子节点，同级一样，直接复用
先判断一方有儿子没儿子的情况，老的有新的没有，直接把老的儿子删除，新的有老的没有，把新的儿子插入到老的父节点中
比较都有儿子的情况 最复杂
递归比较子节点 - 9. ajax 请求放在哪个生命周期中
在created 的时候，视图中的dom都没有渲染处理啊，所以此时如果直接去操作DOM节点，无法找到相关的元素
在mounted中，此时DOM已经渲染出来了，所以可以直接操作DOM节点
一般情况 都放到mounted中，保证逻辑的统一性，因为生命周期都是同步执行的ajax是异步的。放在mounted中，不会等待ajax执行完后才执行后面的生命周期，
服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中 - 10 何时使用beforeDestory
可能在当前页面中使用了$on 方法 都需要在组件销毁前解绑
清除自己定义的定时器
解除事件绑定 scroll mousemove - 11.vue中模板编译原理 很复杂 模板引擎的实现吧
将template 转化为render函数
template模板— AST语法树 用一个对象来描述真实的js语法 -》变成render方法 - 12.vue中v-if v-show 的区别
v-if 如果条件不成立 不会渲染当前指令所在节点的DOM元素
v-show 只是切换 当前dom的显示隐藏
v-show 底层是complie编译成指令东西 匹配show指令 再控制隐藏
v-if 是变成三元表达式了 - 13. 为什么v-for 和v-if 不能连用
v-for 比v-if优先级高一些 ，连用的话 循环的时候，会把v-if 给每个元素都添加一下，造成性能问题 - 14 用vnode 描述一个dom节点
虚拟节点就是用一个对象来描述真实的dom元素
template—>ast树—>codegen—>转化为render函数—>内部调用createElement方法—>虚拟DOM - 15 v-for 中为什么加key
Key主要做DOM-diff 且不能用index 。不加key的话 因为vue比对，一样的标签，会直接复用，删除的话不会删除第一个，会删除最后一个。 不加key，vue默认会加key，是索引。 - 16. mixin mergeOptions
- 17. 渲染更新 过程
【Vue.extend 方法用来创建组建的】… 渲染组件时，通过Vue.extend方法构建子组件的构造函数，并进行实例化，最终手动调用$mount() 进行挂载。更新组件时会进行patchvnode 流程，核心是diff算法。 - 18 组件中的data为什么是一个函数
组件复用，函数能形成封闭作用域，避免组件复用数据互相影响
同一个组件被复用多次，会创建多个实例。这些实例用的是一个构造函数，如果data是一个对象的话。那么多有组件就共享了一个对象了。 New Vue 中data可以是对象，应为它不会被公用。一个项目只能new一个实例。 - 19 vue中的事件绑定
1 原生绑定 普通标签 用的是 addEventListener
2 组件绑定 用的是$on 发布订阅 - 20 v-model 实现原理 如何自定义v-model
组件的v-model 是input+value的语法糖 可以更改方法为change 更改属性为 checked
原生的v-model 会根据标签和type 生成不同的事件和属性
const VueTemplateCompiler = require(‘vue-template-compiler’)
Const ele = VueTemplateComplie.compile(‘<input type=‘checkbox’ v-model = ‘value’/>’)
console.log(ele.render)
以上三行可用来测试 编译成什么东西
加lazy 变成change事件 不加就是监听input事件 - 21 v-html 会导致哪些问题
xss攻击 （直接在input中输入获取cookie代码等） v-html 会清空替换掉标签内的子元素
1382 -1411 - 22 vue 父子组件生命周期调用顺序
网友评论