关于Vue框架，你应该注意什么地方？？？-蒲公英云

一、Vue.js 是什么？
Vue.js（是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用组件化开发以及 Vue 生态系统相关库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应式的数据绑定的组件开发。
二、 Vue 的双向数据绑定原理是什么？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是：1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()通知时，能调用自身的update()方法，并触发 Compile 中绑定的回调，则功成身退。
第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。
三、详细说下你对 Vue 生命周期的理解？
总共分为 8 个阶段:创建前/后，载入前/后，更新前/后，销毁前/后。
beforeCreate：在实例初始化之后，数据观测(data observer)和event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始， e l 属性目前不可见 b e f o r e M o u n t ：在挂载开始之前被调用：相关的 r e n d e r 函数首次被调用。 m o u n t e d ： e l 被新创建的 v m . el 属性目前不可见 beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted：el 被新创建的 vm. el属性目前不可见beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。mounted：el被新创建的vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm. e l 也在文档内。 b e f o r e U p d a t e ：数据更新时调用，发生在虚拟 D O M 重新渲染和打补丁之前。 u p d a t e d ：由于数据更改导致的虚拟 D O M 重新渲染和打补丁，在这之后会调用该钩子。 b e f o r e D e s t r o y ：实例销毁之前调用。在这一步，实例仍然完全可用。 d e s t r o y e d ： V u e 实例销毁后调用。调用后， V u e 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。当使用组件的 k e e p − a l i v e 功能时，增加两个周期： a c t i v a t e d ： k e e p − a l i v e 组件激活时调用。 d e a c t i v a t e d ： k e e p − a l i v e 组件停用时调用。 V u e 2.5.0 版本新增一个周期钩子 e r r o r C a p t u r e d ：当捕获一个来自子孙组件的错误时被调用。 ∗ ∗ 四、请说下具体使用 v u e 的理解？ ∗ ∗ 1 、使用 v u e 不必担心布局更改和类名重复导致的 j s 重写，因为它是靠数据驱动双向绑定，底层是通过 O b j e c t . d e f i n e P r o p e r t y ( ) 定义的数据 s e t 、 g e t 函数原理实现。 2 、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。 3 、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。 4 、 j s 的代码无形的规范，团队合作开发代码可阅读性更高。 ∗ ∗ 五、 s c s s 是什么？在 v u e . c l i 中的安装使用步骤是？有哪几大特性？ ∗ ∗ c s s 的预编译使用步骤：第一步：用 n p m 下三个 l o a d e r （ s a s s − l o a d e r 、 c s s − l o a d e r 、 n o d e − s a s s ）第二步：在 b u i l d 目录找到 w e b p a c k . b a s e . c o n f i g . j s ，在那个 e x t e n d s 属性中加一个拓展 . s c s s 第三步：还是在同一个文件，配置一个 m o d u l e 属性第四步：然后在组件的 s t y l e 标签加上 l a n g 属性，例如： l a n g = ” s c s s ” 特性 : 1 、可以用变量，例如（ el 也在文档内。 beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。当使用组件的 keep-alive 功能时，增加两个周期： activated：keep-alive 组件激活时调用。 deactivated：keep-alive 组件停用时调用。 Vue2.5.0 版本新增一个周期钩子 errorCaptured：当捕获一个来自子孙组件的错误时被调用。 **四、请说下具体使用 vue 的理解？** 1、使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。 2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。 3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。 4、js 的代码无形的规范，团队合作开发代码可阅读性更高。 **五、scss 是什么？在 vue.cli 中的安装使用步骤是？有哪几大特性？** css 的预编译使用步骤：第一步：用 npm 下三个 loader（sass-loader、css-loader、node-sass）第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss 第三步：还是在同一个文件，配置一个 module 属性第四步：然后在组件的 style 标签加上 lang 属性，例如：lang=”scss” 特性:1、可以用变量，例如（ el也在文档内。beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。当使用组件的keep−alive功能时，增加两个周期：activated：keep−alive组件激活时调用。deactivated：keep−alive组件停用时调用。Vue2.5.0版本新增一个周期钩子errorCaptured：当捕获一个来自子孙组件的错误时被调用。∗∗四、请说下具体使用vue的理解？∗∗1、使用vue不必担心布局更改和类名重复导致的js重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty()定义的数据set、get函数原理实现。2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。4、js的代码无形的规范，团队合作开发代码可阅读性更高。∗∗五、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？∗∗css的预编译使用步骤：第一步：用npm下三个loader（sass−loader、css−loader、node−sass）第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss第三步：还是在同一个文件，配置一个module属性第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”特性:1、可以用变量，例如（变量名称=值）；2、可以用混合器；3、可以嵌套
六、Vue 中组件直接的通信是如何实现的？
组件关系可分为父子组件通信、兄弟组件通信。
1、父组件向子组件：通过 props 属性来实现
2、子组件向父组件：子组件用 e m i t ( ) 来触发事件，父组件用 emit( )来触发事件，父组件用 emit()来触发事件，父组件用on( )来监昕子组件的事件。父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。
3、兄弟之间的通信：通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus，之后通过分别调用Bus 事件触发和监听来实现组件之间的通信和参数传递。
七、Vue 中 ref 的作用是什么？
ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。
注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册
在这里插入图片描述今天的前端Vue学习重点分享就到这里了，想学习前端、更多的前端知识，欢迎大家关注、私信我！！！