1.1 Vue 3.0的新特性以及原理
1.1.1  观察机制
      简述：更完备、更精准、更高效，可以对响应式跟踪进行调试，新增了一个创建可观察对象（observable）的 API。
      
        3.0 版本里将有一个基于 Proxy 的观察者，它会提供全语言覆盖的响应式跟踪。相比于 2.x 版本里基于 Object.defineProperty 的观察者，新的实现更加强大：
                              
                              可以检测属性的新增和删除
                              可以检测数组索引的变化和 length 的变化
                              支持 Map、Set、WeakMap 和 WeakSet
                              
       上面正文中提到的Proxy算是这次Vue 3.0 最大的亮点,它不仅取代了Vue 2.0 的 Object.defineProperty 方法并且组建生成增快 100%还有就是快一倍 / 减少一般的内存使用

     下面看一个最简单的Proxy实现方法:

        let obj = {
    	a : 1
}
let proxyObj = new Proxy(obj,{
    get : function (target,prop) {
        return prop in target ? target[prop] : 0
    },
    set : function (target,prop,value) {
        target[prop] = 888;
    }
})
    
console.log(proxyObj.a);        // 1
console.log(proxyObj.b);        // 0

proxyObj.a = 666;
console.log(proxyObj.a)         // 888

作者：大湿兄
链接：https://juejin.im/post/5d3bc7e7f265da1bc85470db
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

上述例子中，我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取) 行为重新做了修改。
        当我们访问对象内原本存在的属性时，会返回原有属性内对应的值，如果试图访问一个不存在的属性时，会返回0 ，即我们访问 proxyObj.a 时，原本对象中有 a 属性，因此会返回 1 ，当我们试图访问对象中不存在的 b 属性时，不会再返回 undefined ，而是返回了 0 ，当我们试图去设置新的属性值的时候，总是会返回 888 ，因此，即便我们对 proxyObj.a 赋值为 666 ，但是并不会生效，依旧会返回 888!
        想要了解更多Proxy就去这里看看阮一峰大大的ECMAScript 6 入门: es6.ruanyifeng.com/#docs/proxy
新的观察者还有以下特点：
提供了一个创建可观察对象的 API。对于中小型应用来说，这个 API 能提供一个轻量、简单的跨组件状态管理方案。
不可变的可观察对象（Immutable observable）。我们可以给一个值创建多个不可变的版本，以防有人修改其属性，必须要在系统在内部临时将其解锁时才能修改其属性。这个机制能够用于冻结传给子组件的属性或者冻结 Vuex 状态树之外的状态变更。
更强大的 debug 能力。我们使用新的 renderTracked 和 renderTriggered 钩子来精确地查明一个组件的 render 是在什么时候由谁触发的。
很容易知道为什么一个组件会重新渲染


**1.1.2  其他的运行时增强**


        简述：体积更小、速度更快，支持 tree-shaking，支持 fragment 和 portal，支持自定义 render。
        体积更小。新的代码库在设计的时候就考虑了 tree-shaking。内置的组件（如  ）和内置的指令（v-model）是按需引入的，支持 tree-shaking。新的运行时最小体积将低于 10kb（gzip之后）。除此之外，由于很多特性是支持 tree-shaking 的，所以我们可以提供更多的内置特性，如果你不想用这些特性，你的代码体积完全不会增加。另外在这里说一嘴,Vue 2.0 体积是Vue 3.0 的一倍
        速度更快，包括虚拟 DOM 的挂载和更新、组件实例的初始化和观察者的创建。3.0 版本将让你的应用启动时间减少一半。
        支持 fragment 和 portal。虽然体积变小了，但是 3.0 版本还是带来了新功能，那就是支持 Fragment（一个组件包含多个根节点）和 Portal（在 DOM 中渲染一个 subtree，而不需要在一个组件中）。
        插槽机制增强。所有由编译产生的插槽现在都是函数，这些函数会在子组件的 render 调用时被调用。这样一来，插槽中的依赖会被认为是子组件的依赖而不是父组件的依赖。这意味着：1、当插槽内容变化时，只有子组件重新渲染；2、当父组件重新渲染时，如果插槽内容没有变化，子组件就不需要重新渲染。这个特性提供了更精确的组件树层面上的变更检测，所以会减少很多无用的渲染。
        自定义 render。我们会提供一个 API 用来创建自定义的 render，因此你不需要为了自定义一些功能而 fork Vue 的代码。这个特性给 Weex 和 NativeScript Vue 这样的项目提供了很多便利。


**>1.1.3  编译器增强**



        简述：编译出的内容对 tree-shaking 友好，更多 AOT 优化，更好的错误提示，对 source map 的支持更好。
        为了输出对 tree-shaking 友好的代码，模板中如果用到了一些可选特性，那么生成的代码中将使用 ES 模块语法来 import 这些特性。因此没有用到的可选特性就不会出现在最终代码中。
        由于对虚拟 DOM 进行了优化，所以有了更高效的编译时优化，比如静态树提升、静态属性提升、为运行时添加编译提示信息以减少子节点正常化（children normalization），VNode 创建的快速路径等。
        重写解析器（parser），以在模板编译错误提示中添加位置信息。这也会使得 Vue 支持模板的 source map。新的解析器可以提供给第三方工具使用，比如 eslint-plugin-vue 和 IDE。


**1.2  Vue 3.0和Vue 2.0 的对比**


        1. 默认进行懒观察（lazy observation）。在 2.x 版本里，不过数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
        2. 更精准的变更通知。比例来说：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
        暂时来讲,Vue 3.0 和 Vue 2.0 中间虽然api没有什么特别大的变化,但是相对于原理而言Vue 3.0 使用了TypeScript进行重构之后各方面的性能提升都有了一个重大突破(相对于2.0来说),另外这个工作已近从2.6版本渐渐开始了,虽然提升效果不是很明显,但是我相信Vue3.0能给我们带来更大的惊喜.

在2019.10.5日发布了Vue3.0预览版源码，但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。

可以直接看 github源码。
标题新版Vue 3.0计划并已实现的主要架构改进和新功能：

编译器（Compiler）

使用模块化架构
优化 “Block tree”
更激进的 static tree hoisting 功能 （检测静态语法，进行提升）
支持 Source map
内置标识符前缀（又名"stripWith"）
内置整齐打印（pretty-printing）功能
移除 Source map 和标识符前缀功能后，使用 Brotli 压缩的浏览器版本精简了大约10KB


运行时（Runtime）

速度显著提升
同时支持 Composition API 和 Options API，以及 typings
基于 Proxy 实现的数据变更检测
支持 Fragments (允许组件有从多个根结点)
支持 Portals (允许在DOM的其它位置进行渲染)
支持 Suspense w/ async setup()
目前不支持IE11


List item
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令发生了变化：

下载安装  npm install -g vue@cli
删除了vue list
创建项目   vue create
启动项目   npm run serve


默认项目目录结构也发生了变化：

移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
如果：你个人还是很想用之前的创建项目的方式 ，那你则需要安装 （npm install -g @vue/cli-init） 这样就可以像之前一样创建项目  eg:   vue init webpack vue-program



npm install -g @vue/cli-init
vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project


项目搭建
第一步安装

npm install -g vue@cli


第二步创建项目文件

vue create project    //项目的名称


第三部  选择快捷式安装配置

这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是 让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个
第四步选择安装依赖

当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键 选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步
第五步 选择css预处理

less和sass可以自行选择
第六步 选择自动化代码格式化检测

第七步是否保存刚才的配置，选择确定后你下次再创建新项目 就有你以前选择的配置了，不用重新再配置一遍了
第八步配置文件放哪

第一个是放在单独的文件配置
第二个是放在package.json文件
第九步是否将以上这些将此保存为未来项目的预配置

第十步  回车下载
第十一步启动项目

 npm run serve    

进入2020年，离vue3.0正式版发布的时间越来越近了。今天，借助尤雨溪大大提前发布的vue3.0源码，老K为大家整理一下vue3.0和vue2.0的区别。
vue3的变化可以总结为以下几点：
更小
更快
加强typescript支持
Api一致性
提高可维护能力
开放更多底层功能
其中前三点是最主要的变化。
更小：
vue2采用面向对象编程的思想，vue3则采用函数式编程的思想。
vue2源码中代码是这样组织的：
function vue(){...} vue.prototype.init = ...
vue3源码中是这样组织的：
//监听方法：function watch(){...} //渲染方法：function render(){...}
原因：充分利用函数式编程组合大于继承的优势，采用函数式编程更利于逻辑功能的复用，webpack打包时更有利于tree-shaking，更利于代码的压缩，更利于返回值类型校验，压缩后的文件体积更小。
更快：
vue3修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化)
vue2需要diff所有的虚拟dom节点，而vue3参考了SVELTE框架的思想，先分层次-然后找不变化的层-针对变化的层进行diff，更新速度不会再受template大小的影响，而是仅由可变的内容决定。经过尤雨溪自己的测试，大概有6倍的速度提升。
加强typescript支持：
vue3的源码开始采用了ts进行编写，给开发者也提供了支持ts的开发模式。
Api一致性
vue3最开始的版本可以完美兼容vue2的api。
提高可维护能力
从源码的层面上提供了更多的可维护能力。
开放更多底层功能
把更多的底层功能开放出来，比如render、依赖收集功能，我们可以更好的进行自定义化开发，可以写更多的高阶组件。
最后我们再谈谈两者在数据双向绑定方面的区别。
数据双向绑定：
关于数据双向绑定的实现，vue2 采用了defineProperty，而vue3则采用了proxy。
优点：
使用proxy不污染源对象，会返回一个新对象，defineProperty是注入型的，会破坏源对象
使用proxy只需要监听整个源对象的属性，不需要循环使用Object.defineProperty监听对象的属性
使用proxy可以获取到对象属性的更多参数，使用defineProperty只能获取到监听属性的新值newvalue
/* vue2.0*/var a = { b:123, c:444};Object.defineProperty(a,'b',{     set: function(newvalue){       console.log('i am be set')     }}) //只能获取到newvalue这个参数/* vue3.0 */var a={ b:123, c:444};var newa = new Proxy(a,{     set:function(target,key,newvalue){         console.log(target,key,newvalue)     }}) //可以获取到target,key,newvalue三个参数
希望整理的这些内容对大家有所帮助。最后老K提前祝大家春节快乐！！！
本文为原创内容，若转载请注明出处，转发感激不尽。

https://www.cnblogs.com/zdz8207/p/vue-3-2.html

vue3.0和2.0的区别

Vue-cli3.0于 8月11日正式发布，看了下评论，兼容性不是很好，命令有不少变化，不是特别的乐观

vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松；

更快

　　1、virtual DOM 完全重写，mounting & patching 提速 100%；

　　2、更多编译时 （compile-time）提醒以减少 runtime 开销；

　　3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能；

　　4、放弃 Object.defineProperty ，使用更快的原生 Proxy；

　　5、组件实例初始化速度提高 100%;

　　6、提速一倍/内存使用降低一半；

更小

　　1、Tree-shaking 更友好；

　　2、新的 core runtime：~ 10kb gzipped；

===============

3.0 新加入了 TypeScript 以及 PWA 的支持

部分命令发生了变化：

下载安装  npm install -g vue@cli

删除了vue list

创建项目   vue create

启动项目   npm run serve

默认项目目录结构也发生了变化：

移除了配置文件目录，config 和 build 文件夹

移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件 

  

安装

npm install -g vue@cli

创建项目文件：

vue create project //项目的名称

====================

vue2和vue3的区别

一、常用命令

vue -V 查看本地 vue 版本

二、官方文档

3.0：https://cli.vuejs.org/zh/

三、创建文件

3.0：vue create 进入工程文件夹，创建项目。

2.0：vue init webpack

四、启动项目

3.0启动npm run serve

2.0启动npm run dev

build没了、config没了、哦对了还有最重要的一点，3.0的安装项目时自动下载node-model。

在根目录下创建一个vue.config.js

module.exports = {

baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

// outputDir: 'dist',

// pages:{ type:Object,Default:undfind }

devServer: {

port: 8888, // 端口号

host: 'localhost',

https: false, // https:{type:Boolean}

open: true, //配置自动启动浏览器

// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

proxy: {

'/api': {

target: '<url>',

ws: true,

changeOrigin: true

},

'/foo': {

target: '<other_url>'

}

}, // 配置多个代理

}

}

==================

Vue3.0和Vue2.0的区别

一、默认进行懒观察（lazy observation）。

在 2.x 版本里，不过数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

二、更精准的变更通知。

比例来说：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

三、3.0 新加入了 TypeScript 以及 PWA 的支持

四、部分命令发生了变化：

下载安装 npm install -g vue@cli

删除了vue list

创建项目 vue create

启动项目 npm run serve

五、默认项目目录结构也发生了变化：

移除了配置文件目录，config 和 build 文件夹

移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件