Vue知识点总结-1

1. 对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器
vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统
 vue是一款MVVM框架,基于双向绑定数据,当数据发生变化时候,vue自身会进行一些运算
 特点:简洁轻量、数据驱动、组件化、模块友好
 vue.js使用了IE8无法模拟的 ECMAScript 5 特性,没有替代方案

2. Vue双向数据绑定的原理以及单项数据流
(1)主要是通过Object对象的defineProperty属性,重写data的set和get函数来实现的
 vue是通过数据劫持的方式来做数据绑定,最核心的方法就是通过Object.defineProperty()来实现对属性的劫持
在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数,达到监听数据变动的目的。
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。
(2)这个概念出现在组件通信。数据从父级流向子级,数据本身还是父级的
  如果操作子级要改变父级的数据,只能通过子级告知父级要操作哪个数据
  然后让父级去修改自己的数据,修改完毕再传给子级

3.Vue原理(发布-订阅者模式,mvvm)
Vue是采用数据劫持配合发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的getter和setter
在数据发生变化的时候,发布消息给依赖收集器,去通知观察者,做出对应的回调函数去更新视图。

具体就是:MVVM作为绑定的入口,整合Observe,Compil和Watcher三者,通过Observe来监听model的变化
通过Compil来解析编译模版指令,最终利用Watcher搭起Observe和Compil之前的通信桥梁,从而达到数据变化 => 更新视图,视图交互变化(input) => 数据model变更的双向绑定效果。

4.vue的两个核心点
答:数据驱动、组件系统
数据驱动:ViewModel,保证数据和视图的一致性。
组件系统:应用类UI可以看作全部是由组件树构成的。

5.引进组件的步骤
答: 在template中引入组件;
在script的第一行用import引入路径;
用component中写上组件名称。

6.说下vue的底层原理
Vue的模式是m-v-vm模式,即(model-view-modelView),通过modelView作为中间层,进行双向数据的绑定与变化
  1)通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树
  2)一旦被监测的数据改变,会通过Object.defineProperty定义的数据拦截,截取到数据的变化
  3)截取到的数据变化,从而通过订阅——发布者模式,触发Watcher(观察者),从而改变虚拟dom的中的具体数据
  4)最后通过更新虚拟dom的元素值,从而改变最后渲染dom树的值,完成双向绑定

7.简述vue等单页面,多页面应用及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新
  单页面应用,用户所有的操作都在一个页面完成
  优点:无刷新,用户体验好,共享资源只需要请求一次即可,采用组件化的思想,代码结构更加规范化,便于修改和调整
  缺点:对搜索引擎(SEO)不友好、低版本不支持,第一次加载首页耗时相对较长,不能使用浏览器导航按钮,需要自行实现前进后退

8.<keep-alive></keep-alive>的作用是什么?
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

9.说一下vue的生命周期,当使用keep-alive属性时,会增加哪两个生命周期
(1)

  1. 创建前/后beforeCreate / created
      在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。
    在created阶段,vue实例的数据对象data有了,el还没有,仍然不能获取dom元素。

  2. 载入前/后beforeMount / mounted
      在beforeMount阶段,vue实例的el和data都初始化了,但还是挂载之前为虚拟的dom节点,data尚未替换。下面vue对dom的操作将围绕这个根元素继续进行,beforeMount 是过渡性的阶段,一般一个项目只能用到一两次。
    在mounted阶段,vue实例挂载完成,data成功渲染。是我们平时用的最多的函数,异步请求写在这里,在这个阶段,数据和dom都被渲染出来

  3. 更新前/后beforeUpdate / updated
      当data变化时,会触发beforeUpdate和updated方法。不常用
    在beforeUpdate阶段,vue遵循数据驱动DOM的原则;beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。
    在updated阶段,DOM会和更改过的内容同步。

  4. 销毁前/后beforeDestory / destoryed
      在上一阶段vue已经成功的通过数据驱动DOM更新,当我们不在需要vue操纵DOM时,就需要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。执行destroy方法后,vue实例已经解除了事件监听以及dom的绑定,但是dom结构依然存在。
    在销毁前,会触发beforeDestroy钩子函数。一般在这里要通过removeEventListener解除手动绑定的事件,
    在销毁后,会触发destroyed钩子函数。

  5. 在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:
    activated 与 deactivated
    当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
    你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。

10.如何使css只在当前组件起作用
  如果想写的css只对当前组件起作用,则在style中写入scoped

猜你喜欢

转载自blog.csdn.net/weixin_45757442/article/details/104853766