Vue2跟Vue3有哪些区别？

Vue2和Vue3的区别如下：

双向数据绑定原理不同：Vue2使用ES5的Object.defineProperty()对数据进行劫持，结合发布订阅模式的方式来实现双向数据绑定；而Vue3使用了ES6的Proxy API对数据进行代理。

是否支持碎片：Vue2不支持碎片，而Vue3支持碎片（Fragments），使得可以拥有多个根节点。

API类型不同：Vue2使用选项类型api，选项型api在代码里分割了不同的属性：data, computed, methods等。

变更通知：在Vue2中，当给对象新增一个属性时，这个对象的所有watcher都会重新运行；而在Vue3中，只有依赖的属性的watch才会重新运行。

命令变化：启动项目命令由npm run dev变成了npm run serve。

项目结构：移除了配置文件目录，config和build文件，移除了vue.config.js文件，移除了static文件夹新增public文件夹，并且index.html移到public中，在src文件夹中新增了views文件夹用于分类视图组件和公共组件。

Vue3新加入了TypeScript以及PWA支持。

综上，Vue2和Vue3在多个方面存在区别。

Vue基础篇

1、不同点：AngularJS的学习成本高，比如增加了DependencyInjection特性，而Vue.js本身提供的API都比较简单、直观。在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。

2、Vue.js是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

3、vue是JavaScript封装成的框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。vue是JavaScript封装成的框架，是一套用于构建用户界面的渐进式JavaScript框架，能实现强大的功能。

4、主体不同vue.js：是一套用于构建用户界面的渐进式JavaScript框架。jquery：是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。

5、脚手架工具搭建的项目应该是把Vue作为一个模块（如CommonJS规范的模块）对待，在源码中引入vue模块，最终需要用构建工具（如webpack）载入模块，编写代码需要require(vue)。

6、两者的主要区别：在build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可。

内容简介：

1）Vue指令

2）computed和watch

3）生命周期钩子

4）组件间的传参

5）插槽

6）修饰符

7）nextTick()

前端三大框架：

Vue：尤雨溪开发

React：Facebook主导开发

Angular：谷歌主导开发

为什么选择Vue?

1.国内Vue的市场份额占比多

2.简单易上手，非常适合前端开发初学者学习

前置知识：

1.HTML、CSS和JS基础

2.了解Node和npm

3.webpack（可选，vue-cli已经封装了打包功能）

使用Vue的两种方式：

1.直接script标签引入vue.js文件

2.基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）

前端框架与库的区别

? jquery 库 -> DOM(操作DOM) + 动画+ ajax请求

? 框架 -> 全方位功能

一、指令

指令（Directives）是带有 v- 前缀的特殊属性。

插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。

v-model也可用在自定义组件上。

5.v-for（列表渲染）

使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1. 利用索引直接设置数组的某一项 2. 对象属性的添加或删除

二、computed和watch

三、生命周期钩子

什么是Vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。

1）beforeCreate

此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。

2）created

此时可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。

在这个钩子函数中，我们可以进行http请求，把请求到的数据储存在data中。

3）模板编译，把data里面的数据和vue语法写的模板编译成HTML

4）beforeMount

将编译完成的HTML挂载到对应虚拟DOM，此时还未挂载到页面上

5）mounted

编译好的HTML已挂载到页面上

6）beforeUpdate和updated

数据更新时调用，通常使用计算属性或侦听器取而代之

7）beforeDestroy

销毁所有观察者、组件及事件监听

8）destroyed

组件已经完全销毁，组件中的数据、方法、计算属性、过滤器等都已不可用。

四、组件间的通信

1.父子组件间的通信

父子组件通信可以总结为props向下传递，事件向上传递。

单向数据流：父级 prop 的更新会向下流动到子组件中，但反过来不行。

每个Vue实例都实现了事件接口：子组件使用 this.$emit(eventName,optionalPayload) 触发自定义事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。

父组件通过ref直接调用子组件中的方法。

子组件调用父组件中的方法：

1）子组件中通过 this.$parent.fatherMethod() 来调用父组件的方法

2）子组件用$emit向父组件触发一个事件，父组件监听这个事件

3）父组件通过props把方法传入子组件中（type: Function），在子组件里直接调用这个方法

2.兄弟组件间的通信

其中一种方法是让父组件充当两个子组件之间的中间件（中继）；

另一种就是使用EventBus（事件总线），它允许两个组件之间直接通信，而不需要涉及父组件：

Vue原型上的方法：

五、插槽

3）作用域插槽

使用场景：

在使用ElementUI组件库的el-table组件时，表格的编辑和删除操作要用到作用域插槽。因为el-table组件，就是当前组件的子组件。通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑、删除的操作。v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法（slot-scope）现在还保留，但3.0之后会移除。

?

六、修饰符

2.事件修饰符

vue提倡的是在方法中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，所以提供了事件修饰符用于DOM的事件处理。

3.按键修饰符

七、nextTick()

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（当数据更新了，在dom中渲染后，自动执行nextTick的回调）

应用场景：需要在视图更新之后，基于新的视图进行操作。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com