2021-12-13 面试(一) v-if/for优先级,toFixed,keep-alive,语义化,vuex,vue双向数据绑定原理,插槽种类和作用

1.v-if和v-for的优先级

回答

在vue2中,v-for的优先级比v-if高,
在vue3中,v-if的优先级比v-for高,
这两个不建议在同一个标签中使用,否则会造成性能浪费

补充

vue2中,会先执行循环再判断条件,即使只想渲染部分元素,仍会全部渲染整个列表再判断,浪费性能
vue3中,v-if的优先级更高,当它执行时,若调用响应的变量不存在,会造成异常

2.0.1+0.2=0.3000000004

回答

原因:二进制精度不够;
解决方案:
1.toFixed;
2.先乘10再除10

验证

document.write(0.1 + 0.2); //0.30000000000000004
//1.toFixed() 方法可把 Number四舍五入为指定小数位数的数字。
document.write((0.1 + 0.2).toFixed(1)); //0.3(括号中的1是要求保留小数到十分位)
//2.先乘10再除以10
document.write((0.1 + 0.2) * 10 / 10)//没起作用,此法放弃

3.keep-alive

回答

keep-alive是vue的内置组件
当它包裹动态组件时,会将不活跃的组件实例缓存,
在组件切换过程中将状态保留在内存中,避免了DOM重复渲染

复习

2021-10-27 vue笔记-组件化开发(五) 动态组件＜component＞和keep-alive
keep-alive是包裹在动态组件外面使用的,包上一层keep-alive后,来回切换页面时,
组件不会关闭而是会保持后台活跃,
比如某组件在input文本框中输入的文本,如果没有加上keep-alive,
来回切换后会消失,加上后则不会

4.语义化的理解

回答

语义化就是让正确的标签做正确的事,
这样做的好处是让HTML的结构一目了然,富有层次感,便于理解和后期维护

5.vuex是什么?有什么用?使用场景是?

回答

vuex是基于vue的状态管理工具,可以管理复杂应用的数据状态,
常用于非父子组件的通信,多层嵌套的组件之间的传值等,主要使用场景是:
中大型web单页应用中,对应用的状态进行管理
vuex有五大特性:state,mutation,action,getter,module

补充

1.state是存放数据的地方,这些数据是可以共享的,类似于vue的data,
组件访问state中数据的方法:this.$store.state.数据名,或者按需导入mapState
2.mutation中定义的方法可以改变state中存放的数据和状态,
触发mutation的方法:this.$store.commit("mutation方法名","mutation传参数据"),或者按需导入mapMutation
3.action是异步处理机制,可以将mutation中定义的方法变成可异步的数据处理方法,
(通过异步操作数据必须通过action,但是action中要通过触发mutation的方法间接修改数据)
触发action的方法:$this.store.dispatch("action方法名","传参"),或者按需导入mapAction
4.getter 类似vue的计算属性,可以用来过滤数据,组件可以通过此方法获得过滤后的数据数据

复习

vuex是什么？怎么使用？哪种功能场景使用它？

6.===和==的区别

回答

名称,大小以及类型

7.vue 双向数据绑定的原理

回答

vue是用过数据劫持,结合订阅者-发布者模式来绑定数据的,
通过Object.defineProperty(),来劫持各个属性的setter和getter,
当数据发生变动时发布消息给订阅者,触发相应的监听回调来渲染视图

补充

以上是vue2的数据响应,它的缺点是

vue实例创建后，无法检测到对象属性的新增或删除，
只能追踪到数据是否被修改（Object.defineProperty只能劫持对象的属性）。

也就有了那个经典的bug:修改数组或对象,但视图层没有同步更新
解决方法是:

   fn(){
    this.arr[0]=10;alert(this.arr);//bug:此处arr[0]的值已更改,但是视图层(h1标签)中没有改变//解决方法:vue2提供给所有示例一个全局方法,可以让算法重新计算和更新页面this.$forceUpdate()//注:vue3中已解决此bug,新增13种绑定数据的其他方法//object.defineProperty proxy}

vue3.0实现数据双向绑定是通过 Proxy/pr?ksi/

8.vue插槽种类和作用

回答

插槽分为匿名插槽,具名插槽和作用域插槽
插槽可以理解成子组件通过slot标签给父组件即将写入的内容预留的一个位置(挖一个坑),
匿名插槽是没有起名字的插槽,
具名插槽是子组件把多个插槽放置在不同地方,父组件根据插槽名字填充对应内容,
作用域插槽可以携带数据:子组件提供数据,父组件提供样式,

复习

2021-08-06 vue笔记-插槽:匿名插槽,具名插槽和作用域插槽的定义和使用,在vue项目中使用插槽

9.es6新增特性(10个以上)

回答:

ES6新增特性有:
解构赋值,箭头函数,let,const,Set(数组去重),Map(值—值,非键值对)
Symbol字符类型,bind,对象新写法fn(){},
JSON对象和字符串的相互转化函数,字符串拼接:波浪号+${}

10.简述封装vue组件的过程

回答

• 创建组件:使用Vue.extend()
• 注册组件:使用Vue.component()方法
• 定义数据:在props中接受定义
• 数据传递:使用emit()方法(读音:/i?m?t/)把数据传递给父组件

补充

子组件:
封装一个单文件组件,首先先创建一个组件文件夹下的.vue文件,首字母大写,
在其script中要有导出语句export default {}...
父组件:
在需要引入该组件的父组件中导入,import 组件名 from "path/组件名"
在components中注册为局部组件,
在template中使用这个组件的同名占位符,即可

11.vue3都有什么

12.说一下原型链

回答

原型链:就是实例对象和原型对象之间的链接,每一个对象都有原型,
原型本身又是对象,原型又有原型,以此类推形成一个链式结构.称为原型链

复习

13.输入url发生了什么

回答

1.浏览器根据请求的URL交给DNS域名解析,找到真实的IP,向服务器发起请求
2.服务器交给后台处理完成后返回数据,浏览器接收(静态)文件
3.浏览器对加载到的资源进行语法解析,建立相应的内部数据结构(如DOM)
4.载入解析到的资源,渲染页面

14.什么是mvvm

回答

MVVM是Model-View-ViewModel的缩写,其中,Model代表数据模型,可以在Model中定义数据,修改和操作的业务逻辑,View代表UI,负责将数据模型转化为UI表现出来,ViewModel是一个对象,负责同步View和Model
MVVM是一种设计模式,在MVVM架构中,Model和View是直接联系的,要通过ViewModel进行交互,才能完成双向数据绑定

链接

链接一
浅入vue，什么是MVVM

15.基础数据类型

回答

基础数据类型有五个:number,string,null,undefined,boolean