青岛中英网站建设,查询域名后缀网站,access怎么做网站,学习做网站大概多久时间#x1f4d1;前言
本文主要是【Vue】——#xff08;适趣AI#xff09;Vue笔试题的文章#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ #x1f3ac;作者简介#xff1a;大家好#xff0c;我是听风与他#x1f947; ☁️博客首页#xff1a;CSDN主页听风与他 …前言
本文主要是【Vue】——适趣AIVue笔试题的文章如果有什么需要改进的地方还请大佬指出⛺️ 作者简介大家好我是听风与他 ☁️博客首页CSDN主页听风与他 每日一句狠狠沉淀顶峰相见 目录 前言1.请简述Vue.js的生命周期函数及其执行顺序2.Vue.js中的v-bind指令和v-model指令有什么区别?3.简述Vue.js的组件通信方式及其优缺点。3.1 props3.2 provide inject3.3 Vuex 4.Vue.js如何实现父子组件之间的数据传递5.请简述Vue.js中的响应式原理。6.如何在Vue.js中实现路由跳转?7.Vue.js中的computed和watch有什么区别?8.Vue.js中的v-for指令和v-if指令有什么区别9.请简述Vue.js中的mixins和extends的作用及其区别。mixinsextends区别 10.Vue.js中的keep-alive组件有什么作用? 如何使用文章末尾 1.请简述Vue.js的生命周期函数及其执行顺序
Vue生命周期函数有8个。Vue生命周期函数有四个阶段 1.实例创建之前/之后2.组件挂载之前/之后3.数据改变视图之前/之后4.实例销毁之前/之后。
顺序:
beforeCreatecreatedbeforeMount,mountedbeforeUpdate,updatedbeforeDestory,destoryed
扩展:每个钩子可以做什么:
1.实例创建之前/之后:
beforeCreate(实例创建之前):每个页面都是一个Vue实例这时实例还没创建所以data还不知道也不能用watch监听这时data和methods的钩子函数都不能使用。created(实例创建之后):实例已经创建完可以得到data调用watch,但是页面还是空白的是最早可以使用data和methods的钩子函数。
2.组件挂载之前/之后:
beforeMount(组件挂载之前)页面挂载前这时节点还没渲染完成。mounted组件挂载之后: 页面挂载完成页面的内容已经渲染出了也可以访问到dom此时模版渲染完成。
created和mounted的区别
created实例创建完成之后,最早可以使用data和methods的钩子函数mounted: 组件挂载之后此时模版渲染完成挂载的节点。created和mounted都可以请求axios
3.数据改变视图更新之前/之后:
beforeUpdate(数据改变更新视图之前): 数据改变更新视图之前就是虚拟DOM打补丁之前这时访问到的DOM还有原有的DOM。updated数据改变视图更新之后数据改变视图更新之后。
4.实例销毁之前/之后
beforeDestory实例销毁之前在destory阶段对data的改变不会再触发周期函数说明此时Vue实例已经解除了事件监听以及和dom的绑定但是dom结构依然存在是最后一次可以使用data和methods的钩子函数。destoryed(实例销毁之后):实例已经被完全销毁。
执行顺序: 2.Vue.js中的v-bind指令和v-model指令有什么区别?
v-bind是一个单向数据绑定映射关系Model-View我们不需要额外的DOM操作只需要进行Model的操作就可以实现视图的联动更新。v-model是一个双向数据绑定映射关系View接受的数据传给modelmodel的数据再传给view。把model绑定到view的同时也将view绑定到model上这样就既可以通过更新model来实现view的自动更新也可以通过view来实现model数据的更新。所以当我们用javascript代码更新model时view就会自动更新反之如果用户更新了viewmodel的数据也自动被更新了。
3.简述Vue.js的组件通信方式及其优缺点。
3.1 props
props通信方式是大家常见的通信类型也是父子组件通讯的常用方式用法是直接在子组件标签中绑定属性和方法用props拿到声明的属性。对于父组件的方法可以通过this.$emit触发优点: props传递数据的优点显而易见可以对props数据进行数据计算、数据监听等处理十分灵活方便但这里单单只是父子一层。缺点子组件虽然不能直接对父组件prop进行重新赋值但父组件是引用类型的时候子组件可以修改父组件的props下面的属性。
3.2 provide inject
此方法是在父组件上通过provide 将方法属性或者是自身实例暴露出去子孙组件、插槽组件甚至是子孙组件的插槽组件通过inject把父辈provide引进来。提供给自己使用很经典的应用的案例就是element-ui中el-form和el-form-item
3.3 Vuex
vuex算是vue中处理复杂组件通信的最佳方案毕竟vue和vuex一个娘胎里出来的。而且vuex底层也是用vue实现的。优点:1.根本解决复杂组件的通信问题 2.支持异步组件通信缺点:流程相比较稍微复杂。
4.Vue.js如何实现父子组件之间的数据传递
第一种父组件-子组件
父组件通过 :area方式将areaData的数据传递给子组件子组件通过props接收父组件传递的数据。
第二种: 子组件 -父组件
子组件通过this.$emit‘方法名’‘数据’)将数据传递给父组件父组件执行change‘handleChange’,handleChange方法的参数step,就是子组件传递过来的数据。
5.请简述Vue.js中的响应式原理。
vue3响应式原理
vue3.x为数据响应式是通过proxy实现的。
相关设计模式 观察者模式(Observer pattern)指的是在对象间定义一个一对多被观察者与多个观察者的关联当一个对象改变了状态所有其他相关对象都会被通知并且自动刷新。发布订阅模式(Publish-subscribepattern)可认为是为观察者模式解耦的进阶版本。在发布者和订阅者之间添加消息中心所有的消息均通过消息中心管理而发布者与订阅者不会直接联系实现了两者的解耦。
6.如何在Vue.js中实现路由跳转?
1.router-link 实现跳转最简单的方法
router-link to需要跳转到的页面的路径2.this.$router.push(‘vue路由’)
3.this.router.replace(‘vue路由’)
7.Vue.js中的computed和watch有什么区别?
在vue.js中computed和watch是两个常用的属性用于处理数据的监听和响应。
1.computed属性: computed属性用于定义一个计算属性它根据其他属性的值计算出一个新的值。计算属性是基于他们的依赖进行缓存的只有当依赖发生变化时计算属性才会重新计算。
new Vue({data: {firstName: John,lastName: Doe},computed: {fullName: function() {return this.firstName this.lastName;}}
}); 2.watch属性watch属性用于监听一个属性的变化并在变化发生时执行响应的操作。与computed不同watch属性是一个对象需要为需要监听的属性提供一个处理函数。 new Vue({data: {firstName: John,lastName: Doe,fullName: },watch: {firstName: function(newVal, oldVal) {this.fullName newVal this.lastName;},lastName: function(newVal, oldVal) {this.fullName this.firstName newVal;}}
}); computed和watch都可以用于监听属性的变化并执行相应的操作 computed和watch的区别 computed是基于它们的依赖进行缓存的只有当依赖发生变化时计算属性才会重新计算而watch则是在属性变化时立即执行相应的操作。computed适用于那些需要根据其他属性计算出一个新值的场景而watch适用于那些需要在属性变化时执行异步或开销较大的操作的场景。computed可以像属性一样直接访问而不需要调用函数而watch则需要定义处理函数并在函数中执行相应的操作。
8.Vue.js中的v-for指令和v-if指令有什么区别
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法其中items是源数据数组或者对象而item则是被迭代的数组元素的别名。在v-for的时候建议设置key值并且保证每个key值都是独一无二的这方便diff算法进行优化。
9.请简述Vue.js中的mixins和extends的作用及其区别。
mixins mixins选项接受一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项。这些选项将会被合并到最终的选项中使用的是和Vue.extend()一样的选项合并逻辑。 mixins的几个规则: 一、触发生命周期钩子函数时先触发mixins组件中的钩子再调用组件自身的函数。二、当mixins数组中有watch混入的组件中也存在watch而且watch中的key相同时混入组件中的watch会先触发而后再是组件中的watch触发三、虽然也能在建立mixin时添加data、template属性但当组件自身也拥有此属性时以本身为准从这一点也能看出制做者的用心扩充。四、data、methods内函数、components和directives等键值对格式的对象均以组件自身或实例为准组件自身没有定义才会去mixins混入的组件中去找。五、watchmixins数组中的组件和组件自身的watch会合并在一个数据中mixins中的组件中的watch会先运行而后再是组件自己的watch六、mixins选项合并当组件和混入对象含有同名选项时这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并在有同名的keys时以组件数据优先。 extends 允许声明扩展另一个组件可以是一个简单的选项对象或构造函数而无需使用Vue.extend,这主要是为了便于扩展单文件组件。extends与mixins相似合并规则和mixins一致extends容许声明扩展另外一个组件能够是一个简单的选项对象或构造函数而无需使用Vue.extend。这主要是为了便于扩展单文件组件。mixins和extends是为了扩展组件均可以理解为继承。
区别
1.mixins接收对象数组可理解为多继承,extends接收的是对象可理解成单继承优先级extendsmixins继承钩子函数的时候是不进行覆盖的extends的钩子函数先触发而后再是mixins的钩子函数触发最后就是组件自身的钩子函数触发。mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程。
10.Vue.js中的keep-alive组件有什么作用? 如何使用
keep-alive是vue的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁他们和transition相似,keep-alive是一个抽象组件它自身不会渲染成一个DOM元素也不会出现在父组件链中。
作用
在组件切换过程中将状态保留在内存中防止重复渲染DOM减少加载时间及性能消耗提高用户体验性。
使用
1.Props
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。
2.生命周期函数
1.activated
在keep-alive组件激活时调用该钩子函数在服务器端渲染期间不被调用
2.deactivated
在keep-alive组件停用时调用该钩子在服务器渲染期间不被调用
3.缓存所有页面
1.在App.vue里面
4.根据条件缓存页面
1.在App.vue里面
5.结合Router,缓存部分页面
1.在router目录下的index.js文件里在App.vue里面
文章末尾
