已知目前vue的稳定版本是2.6.x，后面会发布2.7.x版本（增加了一些vue3的内容）。维护18个月后，除安全漏洞更新外，其余不再继续更新。说明将全面拥抱vue3.0时代。vue3.0在使用上兼容vue2.0资料。1.亮点速览1.Performance[p??f??m?ns]重写了virtualDom的实现（跳过静态节点，只处理动态节点）updatePerformance提升1.3~2倍SSR速度提升2~3倍Treeshaking[??e?k??]can“剪辑”无用模块，只需要打包所需的Fragment['fr?gm?nt]不再局限于模板中的单个根节点s??spens]可以等待嵌套层次结构中的嵌套异步依赖TypeScript更好的TypeScript支持CustomRendererAPICustomRendererAPI用户可以试试WebGL自定义渲染器Composition[?k?mp?z??n]APICombinationAPI，替换原来的Options[??p?nz]API根据逻辑依赖组织代码,提高可读性和可维护性更好的重用逻辑代码（避免混入mixins时的命名冲突问题）但是你仍然可以使用Options[??p?nz]APIProxy[?pr?ksi]https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy响应式原理不再基于Object。defineProperty2.基于vue/cli配置vue3.0https://github.com/vuejs/vue-nextvue-cli-plugin-vue-next$npminstall-g@vue/cli$vue--version$vuecreatexxx$vue添加vue-next"dependencies":{"vue":"^3.0.0-beta.1"},"devDependencies":{"@vue/compiler-sfc":"^3.0.0-betata.1","eslint-plugin-vue":"^7.0.0-alpha.0","vue-cli-plugin-vue-next":"~0.1.3"},eslintConfig":{"扩展":["plugin:vue/vue3-essential"]}3.基于vite配置vue3.0，vite作者游雨溪开发的web开发工具https://github.com/vitejs/vite基于浏览器原生ESimports开发服务器（使用浏览器解析导入，按需在服务器端编译返回，完全跳过打包的概念，服务器随时可用）并且不仅有vue文件支持，还处理热更新，热更新速度不会随着模块的增加而变慢dev$yarnbuild4.MastersetupandresponsivesystemAPIhttps://vue-composition-api-rfc.netlify.app/zh/api.htmlsetupsetup函数是一个新的组件选项，用作在其中使用CompositionAPI的入口点初始化之间的组件ionprops和beforeCreate调用可以接收props和contextthis在setup()中不可用。props是响应式的，可以基于watchEffect/watch进行监听。解构赋值后就失效了。exportdefault{props:{title:String,},setup(props){watchEffect(()=>{console.log(`titleis:`+props.title);});}};返回的结果可以直接在模板中使用exportdefault{props:{title:String},setup(){letsupNum=0,oppNum=0;让change=lx=>{lx===0?supNum++:oppNum++;};return{supNum,oppNum,change};}};ref接受一个参数值并返回一个反应式和可变的ref对象ref对象有一个指向内部值的属性。value在模板中使用ref时，会自动理清，不需要在模板中另外写。valueimport{ref}from"vue";exportdefault{setup(){letsupNum=ref(0),oppNum=ref(0);让变化=lx=>{lx===0?supNum.value++:oppNum.value++;};return{supNum,oppNum,change};}};reactive接收一个普通对象然后返回普通对象的响应式代理相当于2.Vue.observable()响应式转换x是“深”：它将影响对象内的所有嵌套属性import{ref,reactive}from"vue";exportdefault{props:{title:String},setup(){letstate=reactive({supNum:0,oppNum:0,arr:[10,20]});letchange=lx=>{lx===0？state.supNum++:state.oppNum++;//比Object.defineProperty好用的地方在于：对于数据或者未初始化的对象成员，可以随意修改其值，具有响应式效果state.arr[0]=state.arr[0]+1;state.name="beadspeak";};return{//...toRefs(state),state,change};}};unref/toRef/toRefs/isRef/isProxy/isReactive/isReadonlyreadonly传入一个对象（reactive或normal）或ref，返回原始对象的只读代理一个只读代理是“深”的，对象内部的任何嵌套属性也是只读的constoriginal=reactive({计数：0})常量copy=readonly(original)watchEffect(()=>{//dependencytrackingconsole.log(copy.count)});//修改original会触发监听copyoriginal.count++;//不能修改copyAndwillbe警告copy.count++；//warning!computed传入一个getter函数，返回一个ref对象，默认不能手动修改constcount=ref(1);constplusOne=computed(()=>count.value+1);console.log(plusOne.value);//2plusOne.value++;//错误！或者传入一个带有get和set函数的对象来创建一个可手动修改的计算状态constcount=ref(1);constplusOne=computed({get:()=>count.value+1,set:val=>{count.value=val-1;}});plusOne.value=1;console.log(count.value);//0import{ref,reactive,toRefs,computed}from"vue";exportdefault{props:{title:String},setup(){......//计算属性letratio=computed({get:()=>{lettotal=state.supNum+state.oppNum;returntotal===0?"--":((state.supNum/total)*100).toFixed(2)+"%";}});返回{...,比率};}};watchEffect立即执行一个传入的函数，并响应式地跟踪它的依赖关系，当它的依赖关系改变时重新运行该函数exportdefault{props:{title:String,},setup(props){watchEffect(()=>;{console.log(`titleis:`+props.title);});}};watchwatchAPI完全等同于2.xthis.$watchwatch需要监听特定的数据源，在回调函数中执行。监听源改变。监听单个数据源//监听器的数据源可以是一个有返回值的getter函数，也可以是一个conststate=reactive({count:0})watch(()=>state.count,(count,prevCount)=>{/*...*/});constcount=ref(0)watch(count,(count,prevCount)=>{/*...*/});import{ref,reactive,toRefs,computed,watch}from"vue";exportdefault{setup(){....letratio=ref("--");watch(state,(state,preState)=>{lettotal=state.supNum+state.oppNum;ratio.value=total===0?"--":((state.supNum/total)*100).toFixed(2)+"%";});return{...,ratio};}};5.掌握新的生命周期函数和templaterefs的使用在使用combinedAPI时，reactiverefs和templaterefs的概念是统一的
