VUE2和VUE3的区别(简述)

先说说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'   '路由' 之前有写请参考  这里不做阐述了;