前端基础之VUE(四)

1.35 reactive与ref的区别？

Vue3 中的 ref 和 reactive 是 Vue3 中用于数据管理的两种不同的响应式 API。

ref 用于创建一个包装简单值的响应式引用，例如一个数字、字符串或对象。当 ref 创建一个响应式引用时，它返回一个对象，该对象具有一个 value 属性，该属性指向实际值。当 ref 返回的对象中的 value 属性更改时，组件将自动重新渲染。

reactive 用于创建一个响应式对象，该对象可以包含多个属性和嵌套属性。当使用 reactive 创建响应式对象时，返回的对象是一个代理对象，该对象具有与原始对象相同的属性，并且任何对代理对象属性的更改都将触发组件的重新渲染。

1.36 $route 和 $router 的区别？

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数

$router 是“路由实例”想要导航到不同URL 对象包括了路由的跳转方法，钩子函数等。

1.37 v-on可以监听多个方法吗？

可以一个元素绑定多个事件的两种写法，一个事件绑定多个函数的两种写法，修饰符的使用。

<a>doSomething </a>

在method方法里面分别写两个事件；

<button @click="a(),b()">点我ab</button>

1.38 v-model的使用？

v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定.

V-model的原理：

• v-bind绑定一个value属性

• v-on指令给当前元素绑定input事件

可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体

组件上的双向绑定（原理）

v-model绑定在组件上的时候做了以下步骤

• 在父组件内给子组件标签添加 v-model ，其实就是给子组件绑定了 value 属性
• 子组件内使用 prop 创建 创建 value 属性可以拿到父组件传递下来的值，名字必须是 value。
• 子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值
• v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上

1.39 vue遇到的坑，如何解决的？

• 用webpack打包后访问index.html出现资源加载404问题，解决：开发环境的static文件夹是基于根目录的，所以直接用‘/’ 。
• vue中，假如，你引入某个样式，然后这个样式里面有引用到图片，如果你的文件中没有这个图片，这时候，即使你没有引用这个图片对应的类名，但是只要你有引入这个css文件，他找不到相应路径图片也会报错！！！
• 用for循环出来的列表，在设置列表中的元素的动态属性时，需要加bind属性“：”，不然动态属性设置不出来
• 在vue中的html中的img中的src不可以直接设置为变量，在data里面直接引路径，只能通过import的形式引入,值得注意的是，引用这个方式的时候src是变量需要加“：”，不然会报错！！！！！
• 在中使用v-for="(item ,index) in list"进行循环时，需要注意加：:key=“index”,不然会出现警告！
• 父组件ajax异步更新数据，子组件props获取不到

应用场景

当父组件 axjos 获取数据，子组件使用 props 接收数据时，执行 mounted 的时候 axjos 还没有返回数据，而且 mounted 只执行一次，这时 props 中接收的数据为空

解决方案：在对应组件中判断数据的长度

1.40 说说vue中的diff算法？

diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法。

Vue2 是全量 Diff（当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同的节点然后更新。）；Vue3 是静态标记 + 非全量 Diff（Vue 3在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。）

使用最长递增子序列优化对比流程，可以最大程度的减少 DOM 的移动，达到最少的 DOM 操作

1.41 vue中怎么设置全局变量和全局组件？

在main.js中

app.config.globalProperties.$key = '' //定义全局变量

import {getCurrentInstance} from 'vue';

setup(){

const { proxy } = getCurrentInstance();

console.log(proxy.\$key);

}

1.45 vue中给对象添加新属性时，界面不刷新怎么办?

vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法。但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题。

所以在vue中可以使用this.$set(对象名,‘属性名’,属性值)的方法去给对象添加属性,或者使用Vue.set(对象名,‘属性名’,属性值)的方法进行添加,添加之后的属性就带有响应式了

1.46 vuex中的辅助函数怎么使用？

vuex的辅助函数有4个

• mapState 函数返回的是一个对象。通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。
• mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性，因此你可以这样来使用他
• mapMutations 辅助函数将组件中的 methods 映射为 store.commit，其原理就是将this.montify 映射为this.$store.commit(‘montify’)
• mapActions在组件中使用 this.$store.dispatch('prodect') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

1.47 刷新浏览器后，Vuex的数据是否存在？如何解决？

原因：因为 store 里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化。

localStorage 或者就是sessionStorage

下载持久化存储插件。比如使用：vuex-along 的实质也是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中，只不过这个存取过程组件会帮我们完成，我们只需要用vuex的读取数据方式操作就可以了

1.48 vue路由跳转传参的方式有哪些？

params传参(显示参数)

• 在url中会显示出传参的值，刷新页面不会失去拿到的参数，使用该方式传值的时候，需要子路由提前配置好参数

params传参(不显示参数)

• 在url中不会显示出传参的值，但刷新页面会失去拿到的参数，使用该方式 传值 的时候，需要子路由提前配置好name参数

query 传参

• query 传过去的参数会拼接在地址栏中（?name=xx），刷新页面数据不会丢失，使用path和name都可以

VUE几种路由跳转几种方式的区别

• this.$router.push：跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
• this.$router.replace：跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
• this.$router.go(n)：向前或者向后跳转n个页面，n可为正整数或负整数

1.50 单页面应用和多页面应用区别及优缺点？

单页面：顾名思义，只有一个页面。一般是一个主页和多个路由页面组成。

优点：

• 公共资源不重新加载，局部加载，服务器压力小
• 切换速度快，用户体验好
• 前后端分离

缺点：

• 不利于SEO（可以优化：比如路由懒加载等）
• 初次加载时耗时多
• 开发难度较大（相对多页面）

多页面（Multi Page Application——MPA）：有多个HTML页面，跳转的时候是从一个html页面跳到另一个页面。

优点：

• 利于SEO。
• 更容易扩展。
• 更易数据分析。

缺点：

• 开发成本高。
• 服务器压力大。
• 用户体验相对较差。

1.51 EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？

• 添加Bus.$off来关闭

  beforeDestroy () {

  bus.$off('get', this.myhandle)

  }

• 如果想要用bus 来进行页面组件之间的数据传递，需要注意亮点，组件emit事件应在beforeDestory声明周期内。其次，组件B内的$on记得要销毁。

1.52 自定义指令详解

为什么需要自定义指令：因为vue是MVVM模式，只需要关注于数据和业务逻辑，不需要关注DOM的操作，但是有时候面对一些特殊的业务需求时，需要进行DOM的操作，这个时候就需要进行自定义指令。

自定义局部指令:在options api选项中的directives中设置。局部自定义指令是一个对象，对象的属性是自定义指令的名称，对象中属性的值是自定义指令的钩子函数对象

自定义全局指令:在app的directive方法。参数一（name）：自定义指令的名称。参数二（hooks）：自定义指令的钩子函数对象

1.53 slot是什么？有什么作用？原理是什么？

slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。

slot又分三类，默认插槽，具名插槽和作用域插槽。

• 默认插槽：又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
• 具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
• 作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理：

当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.$slot中，默认插槽为vm.$slot.default具名插槽为vm.$slot.xxx，xxx 为插槽名

当组件执行渲染函数时候，遇到slot标签，使用slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽

1.54 $nextTick的使用

用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

$nextTick() 的应用场景

在vue的生命周期 created() 钩子函数中进行 dom 操作，一定要放在 $nextTick() 函数中执行。在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的代码放进 nextTick() 的回调函数中。

mounted() 钩子函数，因为该钩子函数执行时，所有的 DOM 挂载和 渲染都已完成，此时在该钩子函数中进行任何 DOM 操作都不会有问题

在数据变化后要执行某个操作，而这个操作需要随数据改变而改变DOM结构时，这个操作都是需要放置 $nextTick() 的回调函数中。