2021 Vue全家桶面试-大厂面试-学会了-高薪等你拿

拼搏现实的明天。 2022-11-03 04:09 221阅读 0赞

## 理解vue的单项数据流 ##

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图改变一个 prop 的情形：

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: \[‘initialCounter’\],  
data: function () \{  
return \{  
counter: this.initialCounter  
\}  
\}

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: \[‘size’\],  
computed: \{  
normalizedSize: function () \{  
return this.size.trim().toLowerCase()  
\}  
\}

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

props: \{  
list: \{  
type: Array,  
default: (() => \[\])  
\}  
\},  
methods: \{  
addFn () \{  
this.list.push(‘newValue’)  
\}  
\}

单向数据流：父级 prop 的更新会向下流动到子组件中，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值

## 二、生命周期函数 ##

Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2、created（创建后）

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。

3、beforeMount（挂载前）

vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）

vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用 ，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在

## Vue中组件extend和mixin的使用场景？ ##

前者是用来扩展的，简单点来讲是来做加法。后者是混合，通俗来说就是用来做组合。换而言之，当你需要在某一个场景内要使用一个新功能，该新功能只是在某组件上作一些新的逻辑新功能即可，选择用前者。而如果在某一场景，你如果需要的组件可以由以有的小组件构成可以考虑后后者

## 实现Provide Inject祖父和孙子组件响应式传递参数 ##

父组件：  
provide() \{  
return \{  
toGdata: this.toGdata,  
\};  
\},  
data() \{  
return \{  
toGdata: \{  
inpiut:’’  
\},  
\};  
\},  
孙子组件

inject:\[‘toGdata’\],

2021 Vue全家桶面试-大厂面试-学会了-高薪等你拿

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue全家桶——vuex

相关 Selenium自动化测试面试题全家桶

相关面试时，不要只说我会“Vue全家桶”

相关 redis面试全家桶

相关 React面试题，全全全！！！（全家桶）

相关 2021 Vue全家桶面试-大厂面试-学会了-高薪等你拿

相关 2021Vue面试题，大厂面试必备！

相关 vue全家桶

相关【面试需要-Vue全家桶】一文带你看透Vue前端路由

相关 2021年教你增加拿到BAT等大厂offer几率，涨姿势了！