制作网页的软件免费,家具类网站如何优化,设计素材网站解析,创新的常州做网站1、生命周期钩子是如何实现的?
生命周期描述beforeCreatevue实例初始化后#xff0c;数据观测#xff08;data observer#xff09;和事件配置之前。data、computed、watch、methods都无法访问。createdvue实例创建完成后立即调用 #xff0c;可访问 data、computed、wat…1、生命周期钩子是如何实现的?
生命周期描述beforeCreatevue实例初始化后数据观测data observer和事件配置之前。data、computed、watch、methods都无法访问。createdvue实例创建完成后立即调用 可访问 data、computed、watch、methods。未挂载 DOM不能访问el、ref。beforeMount在 DOM 挂载开始之前调用。mountedvue实例被挂载到 DOM。beforeUpdate数据更新之前调用发生在虚拟 DOM 打补丁之前。updated数据更新之后调用。beforeDestroy实例销毁前调用。destroyed实例销毁后调用 。
2、Vue 中组件的 data 为什么是一个函数?
一个组件的 data 选项必须是一个函数因此每个实例可以维护一份被返回对象的独立的拷贝
3、nextTick 在哪里使用?原理是?
根据浏览器的不同所所以兼容的API也不一样兼容顺序
Promise
MutationObserver
setImmediate
setTimeout4、Vue 组件间通讯方式
prop、emit、eventbus、.sync、 $attrs $isteners、ref、插槽、vuex
5、Vue动态组件 is
component:iscomponentId/component
6、父子组件的生命周期执行顺序完整的父子组件生命周期 7、v-if 和 v-show 的区别
v-if:如果为 false 默认不渲染 切换时会进行创建和销毁 会触发生命周期钩子 v-show:默认渲染 css 切换
8、v-if 与 v-for 的优先级
vue2 v-for 优先级高 vue3 v-if 优先级高
9、Vue常用的修饰符
stop阻止冒泡 prevent阻止默认行为 self仅绑定元素自身触发 once只触发一次
10、Vue 如何检测数组变化?
● 初始化 instance -_init-initState-initData-observe-new Observer(value) ● 在构造函数里区分是否是Array ● 给Array重写变异方法 ○ push ○ pop ○ shift ○ unshift ○ splice ○ sort ○ reverse
11、vue.set 方法是如何实现的?
set 方法内部实现方式 ob.dep.notify() ob 通过Observe 给__ob__赋值 dep在get里赋值 notice 会调用 watcher的update 方法
12、Vue.mixin 的使用场景和原理
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被混入该组件本身的选项
同名数据对象对象在内部会进行浅合并 (一层属性深度)在和组件的数据发生冲突时以组件数据优先同名钩子函数将混合为一个数组因此都将被调用。另外混入对象的钩子将在组件自身钩子之前调用 methods, components 和 directives将被混合为同一个对象。两个对象键名冲突时取组件对象的键值对
13、vue-router 两种模式的区别?
hash 模式 背后的原理是 onhashchange 事件,可以在 window 对象上监听这个事件: window.onhashchange function(event){ console.log(event.oldURL, event.newURL); let hash location.hash.slice(1); document.body.style.color hash; }history 模式 因为 HTML5 标准发布多了两个 APIpushState() 和 replaceState()。 通过这两个 API 1可以改变 url 地址且不会发送请求 2不仅可以读取历史记录栈还可以对浏览器历史记录栈进行修改。 除此之外还有 popState().当浏览器跳转到新的状态时将触发 popState 事件. 修改历史状态 包括了 pushState,replaceState 两个方法,这两个方法接收三个参数:stateObj,title,url window.history.pushState(stateObject, title, URL) window.history.replaceState(stateObject, title, URL)
14、Vuex 的 Mutation 和 Action 的区别吗
定位不同 Mutation专注于修改 State理论上是修改 State 的唯一途径。 Action业务代码、异步请求。 角色不同二者有不同的限制 Mutation必须同步执行。 Action可以异步但不能直接操作 State
15、为什么 vue 或者 react 要求 key 值唯一
没有 Key 值的问题 老集合中包含节点A、B、C、D更新后的新集合中包含节点B、A、D、C此时新老集合进行 diff 差异化对比发现 B ! A则创建并插入 B 至新集合删除老集合 A以此类推创建并插入 A、D 和 C删除 B、C 和 D。 因为这些都是相同的节点但由于位置发生变化导致需要进行繁杂低效的删除、创建操作其实只要对这些节点进行位置移动即可。 针对这一现象提出优化策略允许开发者对同一层级的同组子节点添加唯一 key 进行区分虽然只是小小的改动性能上却发生了翻天覆地的变化
16、Vue hook 在父组件监听子组件的生命周期方法
Child
hook:mountedhandleChildMounted
hook:beforeDestroyhandlebeforDestryed
hook:destroyedhandleDestroyed :datadata /17、vue.use和vue.prototype.$xxx的区别
Vue.prototype就是js函数原型对象的特性 函数原型上的属性/方法, 在函数实例化后, 可以在任意实例上读取 Vue.prototype适合于注册Vue生态外的插件Vue.use适合于注册Vue生态内的插件 每一个vue组件都是Vue的实例所以组件内this可以拿到Vue.prototype上添加的属性和方法 Vue.use主要是执行install方法而install主要也是执行Vue.prototype方法
18、$attrs和$listeners 的使用
attrs属性就包含了所有父组件传来的数据(除开已经props声明了的) 当父组件传递了很多数据给子组件时子组件没有声明props来进行接收那么子组件中的attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)子组件还可以使用v−bindattrs属性就包含了所有父组件传来的数据(除开已经props声明了的)子组件还可以使用v-bindattrs属性就包含了所有父组件传来的数据(除开已经props声明了的)子组件还可以使用v−bindattrs的形式向它的子组件孙子组件传递数据孙子组件使用$attrs的方式和它的父组件原理类似。listeners属性和attrs属性类似只是它们传递的东西不一样 l i s t e n e r s 可以通过 v − o n 的形式再次传递给下层组件当父组件在子组件上定义了一些自定义的非原生事件时在子组件内部可以通过 l i s t e n e r s 属性获取 父组件的自定义事件它和 a t t r s 的区别很明显 a t t r s 用来传递属性。使用 l i s t e n e r s 的好处在于如果存在多层级组件无需使用 e m i t 的方式逐级向上触发事件只需要使用 listeners可以通过v-on的形式再次传递给下层组件当父组件在子组件上定义了一些自定义的非原生事件时在子组件内部可以通过listeners属性获取父组件的自定义事件它和attrs的区别很明显attrs用来传递属性。 使用listeners的好处在于如果存在多层级组件无需使用emit的方式逐级向上触发事件只需要使用 listeners可以通过v−on的形式再次传递给下层组件当父组件在子组件上定义了一些自定义的非原生事件时在子组件内部可以通过listeners属性获取父组件的自定义事件它和attrs的区别很明显attrs用来传递属性。使用listeners的好处在于如果存在多层级组件无需使用emit的方式逐级向上触发事件只需要使用listerners就可以得到父组件中的自定义事件相当于偷懒了。inheritAttrs 父组件传递了很多数据给子组件子组件的props没有完全接收那么父组件传递的这些数据就会渲染到HTML上我们可以给子组件设置inheritAttrs 为false避免这样渲染。
data() {return {childStr: child String};
},inheritAttrs: false,总结
attrs:用来会传递属性除了class、style之类的它是一个对象。listeners用来传递事件除了原生事件它也是一个对象。attrs和listeners这两个属性可以解决多层组件之间数据和事件传递的问题。inheritAttrs解决未使用props接收的数据的属性渲染
