vue基础题

如题所述

第1个回答  2022-07-20

Vue2 的核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持
Vue3 的核心是使用new Proxy(对象,{get(),set()})方法来给对象的属性添加get/set方法实现的!

key的作用主要是为了高效地更新虚拟DOM,使用key来给每一个例程做一个唯一的标识;差异算法可以正确的识别此后的解码器,找到正确的位置进行异步进行操作;
在绑定键的时候,最好是一个唯一的值,如item.id而不能是简单的index;在插入数据或删除数据的时候,会导致后面的数据的键绑定的索引变化,长靴导致重新渲染,效率会降低;

第一种:挂载到Vue的prototype上。把全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法的时候没有提示

第二种:利用全局混入mixin,因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示

1.activated: 页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated

v-once 只渲染元素和组件 一次 。随后的重新渲染,元素/组件及其所有的子例程将被视为静态内容并跳过。这可以用于优化更新性能。
单次触发的场景 :表单提交。可防止用户在请求未及时响应时,多次提交〜

页面关闭,路由重定向,v-if和更改键值

项目使用keep-alive时,可搭配组件name进行缓存过滤
DOM做递归组件时需要调用自身name
vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

type 可以是下列原生构造函数中的一个:
8种:字符串,数字,布尔值,数组,对象,日期,函数,符号,自定义构造函数
String、Number、Boolean、Array、Object、Date、Function、Symbol

单个类型就用Number等基础类型,多个类型用数组,必填的话设置require为true,默认值的话设置default,对象和数组设置默认用工厂函数,自定义验证函数validator。

单向数据流:所有状态的改变可记录,可跟踪,源头易转换;所有数据只有一个,组件数据只有唯一的入口和出口,从而使程序更直观更容易理解,有利于应用的可维护性;一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到内置的数据中。
双向数据流:无论数据改变,或是用户操作,都能带来互相的移位,自动更新。
模仿就是:父传子的props就是单向数据流,v-model就是双向数据流

事件修饰符.stop .prevent .capture .self .once .passive
表单修饰符.number .lazy .trim

1、document.getElementById("id")
2、this.$refs.xx

组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue 本身。

delete:只是被删除数组成员变为 empty / undefined,其他元素键值不变
Vue.delete:直接删了数组成员,并改变了数组的键值(对象是响应式的,确保删除能触发更新视图,这个方法主要用于避开 Vue 不能检测到属性被删除的限制)

immediate设置为true就可以监听开始之后立即被调用
deep设置为true 就可以监听到对象的变化

1.一个是侦听属性,一个是计算属性
2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应
3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行
4.一个有缓存,一个没有缓存
watch可以深度监听复杂对象的变化;
computed只能监听简单简单对象的变化
能不用watch就不用watch, watch一般用在你要监听的属性与你要使用的属性没有太多关联的时候,一般在异步时使用

route和router有什么区别?
route:代表当前路由信息对象,可以获取到当前路由的信息参数
router:代表路由实例的对象,包含了路由的跳转方法,钩子函数等
vue-router钩子函数有哪些?都有哪些参数?

有用过vuex吗?它主要解决的是什么问题?推荐在哪些场景用?
多个视图依赖同一个状态
来自不同视图的行为需要变更同一状态
适用于中大型的单页面应用
我主要还是当全局变量来用的,比如登录人信息、token、浏览记录、跨组件的较大临时数据传递。
以往需要调个方法取全局变量或缓存,其实反而增加了初始化流程,而会自动更新的 vuex 就很好用了。
vuex的store有几个属性值?分别讲讲它们的作用是什么?
state:存贮公共数据的地方
Getters:获取公共数据的地方,获取根据业务场景处理返回的数据
mutations:放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行;唯一修改state的方法,修改过程是同步的
action:放的是异步的操作 通过分发操作触发mutation
context是store的一个副本
module 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
Vuex就是提供一个仓库,store仓库里面放了很多对象其中state即使数据源存放地,
vuex中actions和mutations有什么区别?
actions:主要用来处理异步,提交的是mutations,在组件中用dispatch()派发
mutations:用来直接修改state的在组件中用this.$store.commit()触发
其两个都可以用辅助函数mapActions