先说说vue3的优缺点
优点:
将Vue内部的绝大部分api对外暴露,使Vue具备开发大型项目的能力,例如compile编译api等;
webpack的treeshaking(tree shaking 是 DCE 的一种方式,它可以在打包时忽略没有用到的代 码)支持度友好;
使用Proxy进行响应式变量定义,性能提高1.2~2倍;
ssr快了2~3倍;
可在vue中单独使用composition-api插件,或者直接用它开发插件;
对typescript支持更加友好;
缺点:
vue3 将不在支持IE11;
1.vue3相对于vue2,简而言之就是变得更轻,更快,使用起来更加方便;
2.vue3项目目录:
|-node_modules -- 所有的项目依赖包都放在这个目录下;
|-public -- 公共文件夹;
---|favicon.ico -- 网站的显示图标;
---|index.html -- 入口的html文件;
|-src -- 源文件目录,编写的代码基本都在这个目录下;
---|assets -- 放置静态文件的目录,比如logo.pn就放在这里;
---|components -- Vue的组件文件，自定义的组件都会放到这;
---|App.vue -- 根组件,这个在Vue2中也有;
---|main.ts -- 入口文件,因为采用了TypeScript所以是ts结尾;
---|shims-vue.d.ts -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可,所以要有定义文件;
|-.browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件,作用是设置兼容性最低适配版本;
|-.eslintrc.js -- Eslint的配置文件,不用作过多介绍;
|-.gitignore -- 用来配置那些文件不上传到git的文件进行管理;
|-package.json -- 命令配置和包管理文件
|-README.md -- 项目的说明文件,使用markdown语法进行编写;
|-tsconfig.json -- 关于TypoScript的配置文件;
|-yarn.lock -- 使用yarn后自动生成的文件,由Yarn管理,安装yarn包时的重要信息存储到yarn.lock文件中;
3.双向数据绑定:
vue2的双向数据绑定是利用ES5的 Object.definePropert()对数据进行劫持,结合发布订阅者模式 实现的;
vue3的双向数据绑定是使用了ES6的 Proxy对数据的代理,通过reactive()函数给每一个对象都包 一层Proxy,通过Proxy监听属性的变化,从而实现对数据的监控;
4.方法定义:
vue2 data(){return{}},methods:{}
vue3 数据和方法都定义在setup中,并统一return{}出去
setup(){onMounted(() => {});} 注:onMounted须引入
5.vue2 vue3组件通信 可参考这个链接(感谢作者:沐华)
https://juejin.cn/post/6999687348120190983
6.关于v-if和v-for的优先级:
vue2 在一个元素上同时使用 v-if 和 v-for v-for会优先执行
vue3 v-if 总会优先于 v-for生效
7.新的全局api (main.js中)
调用createApp返回一个应用实例;
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
8.关于 '计算属性' '监听' 'ref' 'reactive' '路由' 之前有写请参考 这里不做阐述了;
