Vue 核心知识点

1、 什么是虚拟 DOM ?与 key 值得关系?

Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

简单来说,可以把Virtual DOM 理解为一个简单的JS对象,并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。

对于虚拟DOM,咱们来看一个简单的实例,就是下图所示的这个,详细的阐述了模板 → 渲染函数 → 虚拟DOM树 → 真实DOM的一个过程。

虚拟 DOM 详细描述请戳这里

2、vue中父子组件调用方法。

  • 【父子】子组件用 props,接受父组件传递过来的值,父组件给子组件传值用props 传递。

  • 【子父】子组件调用父组件的方法可以使用this.$emit() 。

  • 【兄弟 $ref】ref 链 ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。:父组件要给子组件传值,在子组件上定义一个 ref 属性,这样通过父组件的 $refs 属性就可以获取子组件的值了,也可以进行父子,兄弟之间的传值,even.bus 事件总线:简单的场景下,使用一个 空的 VUE 实例作为事件总线,可以实现兄弟之间的通信。

3、vue等单页面应用及其优缺点。

优点

  • 具有桌面应用的即时性、网站的可移植性和可访问性。
  • 用户体验好、快,内容的改变不需要重新加载整个页面。
  • 基于上面一点,SPA相对对服务器压力小。
  • 良好的前后端分离。SPA和RESTful架构一起使用,后端不再负责模板渲染、输出页面工作,web前端和各种移动终端地位对等,后端API通用化。
  • 同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端;

缺点

  • 不利于SEO。(如果你看中SEO,那就不应该在页面上使用JavaScript,你应该使用网站而不是Web应用)
  • 初次加载耗时相对增多。
  • 导航不可用,如果一定要导航需要自行实现前进、后退。

4、v-show和v-if指令的共同点和不同点。

v-show 指令是通过修改元素的displayCSS 让其显示或者影藏。

v-if 指令是直接销毁和重建DOM达到让元素显示和隐藏的效果(注意:v-if 可以实现组件的重新渲染)。

5、如何让CSS只在当前组件中起作用。

将当前组件的<style>修改为<style scoped>

6、<keep-alive></keep-alive>的作用是什么。

<keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

7、在Vue中使用插件的步骤。

  • 采用ES6的import ... from ...语法。
  • 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象 Vue.use(MyPlugin, { someOption: true })

8、vue生命周期简介(生命周期函数)。

序号 钩子函数 触发的行为 在此阶段可以做的事情
2 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 加loading事件
3 created vue实例的数据对象data有了,$el还没有 结束loading、请求数据为mounted渲染做准备
4 beforeMount vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。 ..
5 mounted vue实例挂载完成,data.filter成功渲染 配合路由钩子使用
6 beforeUpdate data更新时触发 ..
7 updated data更新时触发 数据更新时,做一些处理(此处也可以用watch进行观测)
8 beforeDestroy 组件销毁时触发 ..
9 destroyed 组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在 组件销毁时进行提示

9、什么是 MVVM?与 MVM 的区别。

mvvm 是一种简化用户界面的事件驱动编程方式( model -> view -> viewModel )。

10、VUE 中如何封装组件?什么组件,为什么要封装组件?组件中 data 为什么是一个函数。

  • 为什么要封装组件: (主要就是为了解耦,提高代码复用率。)。
  • 什么是组件: (页面上可以复用的都称之为组件 它是 HTML、CSS、JS 的聚合体)。
  • 组件中的 data 为什么是一个函数: (让每个返回的实例都可以维护一份被返回对象的独立的拷贝。)
  • 什么是模块: (相当于业务逻辑块,把同一类的项目里的功能逻辑进行需求性的封装。)。
  • 模块化开发:就是将 js 文件按照功能分离,根据需求引入不同的文件,源于服务端。
  • 组件化开发:具备单个可移植性,即“随用随加载”,不需要为其准备复杂的基础条件,组件是声明式,非命令式。

11、 slot 是什么?如何使用。(插槽:1、具名插槽、2、匿名插槽、3、作用域插槽)

在引用子组件开始标签和结束标签之间,插入一个任意一个元素,用 slot 标签包裹一下,在父组件调用子组件的时候,这个插槽就会插入到子组件对应的具名插槽的位置。slot 有一个 name 属性,加 name 属性就是具名插槽,不加就是匿名插槽。

原文地址:https://www.cnblogs.com/boyGdm/p/14005463.html