Warren's

[toc]

  • 52

keep-alive 实现原理： 根据组件的 name 获取缓存的 vnode

  • 51

Proxy 的优势

Object.defineProperty(obj,key, 控制属性) 一般是循环一个对象的键值，逐个添加监听

（1）对该对象添加属性或删除属性时无法监听 （2）循环监听数组无效，数组值的修改，添加，删除都无法监听 （3）由于使用递归遍历对象及其子属性，层级过深性能会有影响

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

proxy 返回一个新的实例对象 不改变原对象，defineProperty 由于是直接拦截原对象的属性 所以会改变原对象

Proxy(obj,控制属性方法)

  • 50

单页与多页的区别

页面、体验、资源文件、适用场景（seo）、过渡动画、内容更新、路由模式、数据传递、相关成本

  • 49

  • 48

  • 47 nextTick 原理

  • 46 vue diff 算法

  • 45 v-model 实现原理

  • 44 dispatch action commit mutation

  • 43 通信方式：props this.$parents.count(获取父组件实例) $emit $children refs 父元素设置 { provide： { name: 'hew' } } 子元素 { inject: ['name'] } 都是和data同层级都是挂载到vue实例上的 都可以通过this来访问 v-bind="$attrs" v-on="$listeners" vuex

/* bus.js */
import Vue from 'vue'
export default new Vue()

/* 任意页面 A */
import eventBus from 'bus.js'
mounted () {
    eventBus.$on('busClick', (data) => {
        this.$message.success('on 监听到了事件')  // data 是返回的参数
    })
},
destroyed () {
    eventBus.$off('busClick') // 不加名称，就移除所有的监听事件
},

/* 任意页面 B */
import eventBus from 'bus.js'
methods: {
    handleClick () {
        eventBus.$emit('busClick', '这是传递的参数')
    }
}

  • 42 vue 每个周期干的事情

  • 41 vue 基本原理

  • 39 vue3 新语法

  • 38 react和vue 都有虚拟DOM，props；vue数据双向绑定，react提倡单向数据流

  • 36 虚拟DOM ： 一个js对象，将多次的DOM修改结果一次性更新到页面上；保障性能；跨平台，服务端渲染，uniapp

  • 35 子组件修改父组件值

  • 34 vue3的变化

  • 33 子父组件的执行顺序： f-beforeCreate f-created f-beforMount c-befroeCreate c-created c-deforeMount c-mounted f-mounted 父组件执行，除了 mounted 之外的所有钩子函数 ；更新和销毁 也是由父组件开始父组件结束，洋葱模型

  • 32 mixin data 递归合并，钩子同名函数合并为数组先调mixin中的；值为对象的合并，同名的用组件的

  • 31 data 更新 视图为什么没有立即更新，因为更新操作会被放到一个异步队列中，等所有的同步数据更新后，在异步队列中一次执行

  • 30 data 为什么必须是函数： 因为组件可能会被重复实例化话 防止多个组件引用同一个对象地址

  • 27 路由 /p/:id router.push({ name: 'n', param: { id: 1 } }) 这种有效

  • 26 解析模板： 正则匹配特定命令字符；解析节点类型

  • 25 vue3 hook 语法

  • 24 单页应用和多页应用

  • 23 router-link： 有一个 to 属性和tag属性（默认a）标签；检查是都否是hash路由模式，history.pushState(null,null,this.to)

  • 22 所有带 $ 的方法

  • 21 自定义指令： 全局：Vue.directive('name', { inserted(el, bing) { bing.value }, }) 局部：directives: { name: { bind(el, bing) { // 只执行一次 } } }

  • 20 computer 可基于内部依赖进行缓存，只要依赖不变，不会重新计算，有get和set，不持支异步，响应式

  • 19 路由钩子 全局: router.beforeEach()拿来判断登录|beforeResolve()几乎与 beforeEach() 一致 beforeRouteEnter后调用 |afterEach() 页面：beforeRouteEnter()无法访问this 用next回调返回的参数访问； beforeRouteUpdate()/foo/:id 复用组件时触发；beforeRouteLeave

  • 18 vue 双向绑定原理：definProperty

  • 17 vuex 与 localstorage的区别

  • 16 尽可能少的重绘页面；使用 innerHTML 一次性注入代码

  • 15 seo： 1. 导航尽量用文字导航，用图片的话加上 alt title；恰当的使用 h1-6 标签；利用 Prerender.io 等第三方库 在服务器部署，当有搜索引擎来爬取数据时， 就返回根据js生成的html文件

  • 14 action： 异步操作， action中的 commit 触发 mutation ; store.dispatch触发 或是 mapAction； Mutation：同步操作，修改state，store.commit

  • 13 vuex 数据存储 防刷新丢失 可以放 localstorage sessionstorage

  • 12 vue-cli 多页面 配置 vue.config.js 的 pages 属性即可

  • 11 composition API 查看 vue3 语法

  • 10 vue-history 注意页面跳转后刷新页面，服务器会报错，比如服务器入口路由是 /page 跳转后是 /page/a ，服务器没有该地址，就要报404；后端可以将 /page: 后的地址都捕获为匹配参数

  • 9 nextTick： Promise -> mutationAbserver(创建一个文本节点再修改它从而触发监听) -> setImmediate -> setTimeout

  • 8 单向数据流：prop 无法修改 v-model 默认 prop value 事件 input

  • 7 父组件监听子组件的生命周期： 利用 on 和 emit； 子组件的 生命周期函数中触发 $emit 方法，告知父组件；利用父组件中给子组件绑定 @hook:mounted="someMethod"

  • 6 vue 定义全局方法： Vue.protitype.method = () => {}; 全局 mixin；全局插件； 全局函数 this.$root.$on('myEvent', () => {}) this.$root.$off('myEvent'); this.$root.$emit('myEvent', 'name')

  • 5

data(){ return { person: { name: 'hew' } } }

this.$set(this.person, 'class', '1'); 当data上绑定的对象，想加一个属性，想检测其变化，就需要用该方法设置一下，如果是在created钩子函数中就没有必要设置了，因为在这个周期函数里，数据是可以直接被挂载的

  • 4 如何做权限校验： 登陆后保存 token ; 初始化路由权限；结合vue自定义指令配置按钮权限

  • 3 computer 实现原理

  • 2 push 数组 会不会出发，会 因为vue对数组方法进行了重置

  • 1 { a.b } created 和 mounted 中修改b的值 前者的值会显示在界面上 后者不会(前提是在data上只挂载了 a 属性), 但是 vue3 会渲染

Last Updated:
Contributors: Warren