1、生命周期
-
创建期前后(beforecreate(vue实例$ el data还没创建此时均为undefined),created(初始化结束,data已创建,$ el还未完成初始化))
-
载入期前后(beforemount($ el完成初始化,页面dom完成),mounted(data赋值到dom页面加载完成))
-
更新器前后(beforeupdate(data发生变化,页面还未同步),updated(data和页面一致))
-
销毁期前后(beforedestory(正在销毁中,所有实例方法都还可以使用),destoryed(销毁完成,所有数据方法组件均已被销毁不可使用))
2、vue2.0双向绑定原理 -
mvvm原理,m为model v为view vm为viewmodel,
-
通过数据劫持结合发布者-订阅者模式来实现数据的双向绑定,数据劫持是通过object.definedproperty()的set()和get方法来重新定义。
3、vue3.0响应式原理 -
通过proxy代理,能直接监听对象和数组的变化,多达十三种拦截方法。
-
解释2
4、vuex
state(初始化数据) action(异步处理数据) mutation(唯一一个能修改state的操作) getter(从state中动态获取相关数据) module(模块化) -
1、action可以异步,mutation必须同步
-
2、mutation是唯一可以修改state的(commit)
-
3、action修改state需要经过mutation(dispatch)
如何使用vuex
5、axios(引入和使用) -
属于xmlhttprequest,是一个基于promise的http请求库,可用于浏览器(xmlhttprequest)和node(http请求)
-
他可以拦截请求和响应 可以将响应回来的内容自动转换成JSON数据类型 安全性高客户端支持防御xsrf 可以取消请求
6、watch(详情)
参数: -
deep(当监听的值为对象时,通过deep就可以监听到值的变化(深度监听))
-
immediate(第一次执行方法是就触发(组件加载立即触发回调函数执行))
7、computed(使用) -
当计算数值存在于data或props里时会被警告,computed专门用来处理复杂表达式的,在vue中,不建议在模板语法中写复杂的表达式,如:x+y+(z-1)这种,所以vue建了一个computed用来处理这类表达式。
9、前端一般都使用哈希路由(hash)
与history的区别 -
url展示上,hash有#,history没有
-
history 模式需要后端配合将所有访问都指向 index.html,否则用户刷新页面,会导致404错误
10、nextTick -
vue的异步更新导致dom无法立刻更新,nextTick回调是在下次dom更新循环结束之后执行的延迟回调
11、匿名插槽 实名插槽 作用域插槽
12、keep-alive
13、vue优化 -
路由懒加载
-
删除页面出现的不必要代码 eg:console
-
引入库使用cdn减少服务器压力
-
使用轻量级工具
-
按需引入
-
提取组件
-
不写内联样式
14、v-if v-show -
v-if 是真正的条件渲染,知道条件初次为真时才会开始渲染
-
v-show会直接渲染,然后通过控制样式 display none来显示隐藏
-
v-show适用于频繁切换的场景,v-if反之
15、v-for优于v-if被解析 -
1、如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能
-
2、要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环
-
3、如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项
16、vue.set(vue2.0) -
因为 ES5 的限制,vue 无法检测到对象属性的添加和删除。由于 Vue 会在初始化实例时对属性执行 getter/setter
转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。 -
vue3.0通过proxy可直接操控对象和数组,废弃了$set
17、vue中的data为何是函数 -
组件是可复用的,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的 data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data 数据就应该被复制一次,之后,当某一处复用的地方组件内 data 数据被改变时,其他复用地方组件的 data 数据不受影响.
-
组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果。(对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题)
18、data大数据优化 -
vue 把 data、props、store 等数据做成响应式,也就是会对这些响应式数据做深度监听,给每一个object类型的key(包括嵌套object)添加observer(vue3使用proxy)。所以如果我们不需要数据是响应式的,可以在.vue 文件头部直接使用 let、const 定义变量,在组件销毁的时候将该这些变量设为null。
19、vue3.0和vue2.0的差异
1、源码组织方式变化:使用 TS 重写 2、支持 Composition API:基于函数的API,更加灵活组织组件逻辑(vue2用的是options api) 3、响应式系统提升:Vue3中响应式数据原理改成proxy,可监听动态新增删除属性,以及数组变化 4、编译优化:vue2通过标记静态根节点优化diff,Vue3 标记和提升所有静态根节点,diff的时候只需要对比动态节点内容 5、打包体积优化:移除了一些不常用的api(inline-template、filter) 6、生命周期的变化:使用setup代替了之前的beforeCreate和created 7、Vue3的template模板支持多个根标签 8、Vuex状态管理:创建实例的方式改变,Vue2为new Store , Vue3为createStore 9、Route获取页面实例与路由信息:vue2通过this获取router实例,vue3通过使用 getCurrentInstance/ userRoute和userRouter方法获取当前组件实例 10、支柱Props的使用变化:vue2通过this获取props里面的内容,vue3直接通过 props 11、父子组件传值:vue3在向父组件传回数据时,如使用的自定义名称,如backData,则需要在emits中定义一下。
20、vue-router路由跳转
<router-link :to="{name:'users',params:{id:1}}">跳</router-link>
this.$ router.push({name:'users',params:{id:1}})
this.$ router.push({path:'/user',query:{id:1}'})