浅谈vue的一些小小资料

一只小火煎

已于 2022-05-07 15:13:00 修改

阅读量144

点赞数

文章标签： vue.js javascript 前端

于 2022-05-07 12:43:33 首次发布

本文链接：https://blog.csdn.net/qq_56713135/article/details/124628454

版权

1.v-if和v-show区别

答：v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除，
   有更高的切换消耗，适合在请求后台接口，用接口返回数据渲染生成多个
   元素的时候，把一个元素作为包装元素，能更加快捷判断
v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，
   设置none或者是block，DOM元素是还存在的，有更高的初始渲染消耗
   适合频繁的切换，比如商品分类选项卡

2.v-for中key的作用

答：key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡
切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换
其内部属性而不会触发过渡效果。

3.vue中的data为什么是function

答：组件中的data写成函数，数据是以函数的返回值形式定义的，每复用一次，就会产生一个
新的data。创建一个新的私有空间，这样的话各个组件实例都有各自的实例，如果写成对象
形式，就容易造成数据污染，使得所有组件实例之间共用一份data

4.vue中双向绑定的原理

答：通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布
消息给订阅者，触发相应的监听回调。

5.keep-alive的作用和被keep-alive声明的组件的生命周期

答：keep-alive主要用于缓存内部组件实例，防止重复渲染DOM，目的在于keep-alive内部组件切
换时，不需要重新创建组件实例
生命周期：页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发
deactivated。当再次进入（前进或者后退）时，只触发activated

6.说一下vue的生命周期，以及生命周期都做了什么事情

答：1.init初始化后进入第一个生命周期，beforeCreate被调用完成；
2.在实例创建完成后立即调用created；
3.beforeMount，在挂载开始之前被调用：相关的 render 函数首次被调用；
4.mounted，el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子；
5.beforeUpdate，数据更新时调用，发生在虚拟 DOM 打补丁之前；
6.updated，由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子；
7.activated，keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用；
8.deactivated，keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用；
9.beforeDestroy，实例销毁之前调用，该钩子在服务器端渲染期间不被调用；
10.destroyed，Vue 实例销毁后调用，所有东西都会解绑定，所有的事件监听器会被移除，
所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
11.errorCaptured（2.5.0+ 新增），当捕获一个来自子孙组件的错误时被调用。

7.vue什么时候操作DOM比较合适？操作时发现有的组件获取不到怎么办？
.mounted不能保证所有子组件被挂载，因此需要使用$nexttick

答：在vue中不建议操作DOM，但是如果我们在没办法的情况下，可以通过ref来进行DOM操作
做个异步处理就可以了，最简单的做法就是让这个方法延迟一点执行，
使用一个setTimeout来将这个方法延迟执行；或者使用$nextTick（）

8.发送网络请求在那个函数中？

答：1. 因为请求回来的数据要放在data对象内，所以，最早只能在created()中发送请求。因为
此时已经有组件对象和data对象了。axios请求回来的数据，就可以放入data对象中。
2. 最保险的但是稍微有点儿晚的做法: 在mounted()阶段，也就是整个虚拟DOM树都加载
完再发送axios请求。

9.vue组件间传值有哪些方式

答：父子组件传值：在父组件中给子组件的自定义属性绑定一个父组件的变量，在子组件的props属性中可以取出父组件给的值
$parent方法是在子组件中可以直接访问该组件的父实例或组件
子父组件传值：在父组件中给子组件的自定义属性绑定一个父组件的函数，在子组件中 this.$emit(“父的处理函数”,this.数据) 触发父组件中的函数进行传参
$children方法是在父组件中可以直接访问子组件的实例，但是不保证子组件的顺序
兄弟组件传值：创建全局空Vue实例eventBus，具体页面使用$emit发布事件-传递值，具体页面使用$on订阅事件-接收值，$off()移除事件监听
ref 被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

10.vue中改变数组内索引的值，数据不更新，如何处理

答：Vue.set(需要修改的数据源，需要修改的项的索引，修改的值)
this.$set(需要修改的数据源，需要修改的项的索引，修改的值)

11.讲一下vuex

答：vuex 是一个专门为vue.js应用程序开发的状态管理模式。这个状态我们可以理解为在data中的属性，
需要共享给其他组件使用的部分。也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

12.vue-router实现路由懒加载（动态加载路由）

答：1. vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。

2. 路由懒加载(使用import)。

3. webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

13.JS中的宿主对象与原生对象有何不同？

答：宿主对象:这些是运行环境提供的对象。这意味着它们在不同的环境下是不同的。例如，浏览器包含像windows这样的对象，但是Node.js环境提供像Node List这样的对象。

原生对象:这些是JS中的内置对象。它们也被称为全局对象，因为如果使用JS，内置对象不受是运行环境影响。

14.请说下封装vue组件的过程