vue.js的二十个知识点小结

发布时间:2024年01月23日

1、state:定义或者在setup中返回使用的数据

2、view:在模板template中可以使用这些数据,模块最终会被渲染成dom

3、actions:在模块中产生一些行为时间,处理这些行为事件,修改state的行为

4、单一状态树:用一个对象就包含全部的应用层级的状态,采用的是SSOT,单一数据源,vuex使用的就是单一状态树,每个应用仅包含一个store实例,单一状态树与模块化不冲突

5、vue的基本原理:当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty将他们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

6、双向数据绑定原理:Vue.js采用数据劫持结合发布者-订阅者的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布信息给订阅者,触发相应的监听回调

7、使用Object.defineProperty()来进行数据劫持的缺点:通过下标方式修改数组数组或者给对象新增属性,都不能触发组件的重新渲染,对于大部分数组操作其实都拦截不到,只是vue内部通过重写函数的方式解决了这个问题。

8、data中为何是一个函数:vue组件可能存在多个实例,如果使用对象形式定义data,则会导致它们共用一个data对象,那么状态变更将会影响所有组件实例。

9、vm.$set 的实现原理是:

● 如果目标是数组,直接使用数组的 splice 方法触发响应式;

● 如果目标是对象,先判断属性是否存在、对象是否是响应式,最终如果要对属性进行响应式处理,则是通过调用 defineReactive 方法进行响应式处理( defineReactive 方法就是 Vue 在初始化对象时,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法)

10、SPA 单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次 js、css 等相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。MPA 多页面应用 (MultiPage Application),指有多个独立页面的应用,每个页面必须重复加载 js、css 等相关资源。多页应用跳转,需要整页资源刷新

单页面应用( SPA)多页面应用( MPA)
组成一个主页面和多个页面片段多个主页面
刷新方式局部刷新整页刷新
url模式哈希模式历史模式
SEO搜索引擎优化难实现,可使用SSR方式改善容易实现
数据传递容易通过url、cookie、localStorage等传递
页面切换速度快,用户体验良好切换加载资源,速度慢,用户体验差
维护成本相对容易相对复杂

单页面缺点:

初次加载耗时多

由于单页应用在一个页面中显示所有内容,所以不能使用浏览器的前进后退功能,所有的内容切换需要自己建立堆栈管理

SEO难度较大

11、vue中data的一个属性值发生变化后,试图会立即同步执行重新渲染吗?

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。Vue 在更新DOM 时是异步执行的。只要侦听到数据变化, Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环 tick 中,Vue 刷新队列并执行实际已去重的)工作

12、vue提倡单向数据流,父级props的更新会流向子组件,为了防止子组件意外改变父组件状态,导致数据流混乱,debug成本会非常高,只能通过$emit派发一个自定义事件,当父组件接收到后,由父组件修改

13、assets和static的异同点:都用来存储静态资源的,项目打包的时候assets也会打包压缩,而static不会打包,在服务器会占用更大的空间,建议将template需要的样式文件js文件放置在assets中,引入的第三方资源文件,如iconfont.css等文件可以放在static中,因为这些第三方文件已经经过处理,可以直接上传

14、添加或删除对象的属性时,Vue 检测不到。因为添加或删除的对象没有在初始化进行响应式处理

15、SSR服务端渲染:将vue在客户端把标签渲染成HTML的工作放在服务端完成,然后再把HTML直接返回给客户端

16、 vue初始页面闪动

使用 vue 开发时,在 vue 初始化之前,由于 div 是不归 vue 管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是还是有必要让解决这个问题的。首先:在 css 里加上以下代码:

[v-clock]{
  display:none
}

如果没有彻底解决问题,则在根元素加上style=“display:none;” :style=“{display: ‘block’}”

17、v-for和v-if的优先级:Vue2中v-for 优先于 v-if 被解析(Vue3中则优先级相反 ),如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能。要避免出现这种情况,则在外层嵌套 template,在这一层进行 v-if判断,然后在内部进行 v-for 循环。如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项。

18、过滤器:对要显示的数据进行格式化后再展示

// 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
	  // 进行一定的数据处理
	  return newValue
})
// 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

19、vuex是什么?如何使用?

vuex是基于vue状态管理的库

vuex的五个特性:

state:存储或定义共享数据,通过$store/mapState访问数据

mutation:修改vuex数据对的唯一来源,commit提交mutation

action:处理异步操作,dispatch分发

getters:基于state进行派生数据

modules:将vuex数据进行模块化

同步流程:commit->mutations->state

异步流程::dispatch->actions->mutations->state

20、路由模式的区别

hash:有#;不经过服务器;不需要后端配合;底层原理:跳转window.location.href,监听onhashchange

history:跳转history API,histoty.pushState和history,replaceState监听onpopState(前进/后退)

文章来源:https://blog.csdn.net/qq_45914628/article/details/135720968
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。