vue3的介绍及实战笔记(持续更新...)

vue3的介绍及实战笔记

网址：学习视频

1.vue3的重要性。

优点：

• 最火的框架;
• 速度更快，体积更小；
• 提供更先进的内置组件;
• 组合API，更好的组合逻辑;
• 越来越多公司使用vue3。

2.vite的介绍。

脚手架，创建vue3的单应用(SPA)，仅用于vue3，不基于webpack，轻量且运行快。
vue-cli建议在企业级开发中使用，vite不建议…。

3.创建vite项目。

npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev

4.vite项目介绍。

通过main.js(入口文件)把App.vue(根组件)渲染到index.html(唯一的Html页面)的指定区域中。

5.Composition API。

(1) vue2与vue3的差异

• template可以包含多个根节点
• 入口文件渲染组件不一样

(2) 代码风格

一个功能逻辑的代码组织在一起(包含数据，函数。计算属性，侦听器…)。

(3) 优点：

功能逻辑复制繁多情况下，各个功能逻辑代码组织在一起，便于阅读和维护。

(4) 缺点:

需要有良好的代码组织能力和拆分逻辑能力。

(5) setup函数介绍

• 专门为组件提供的新属性，为使用vue3的新特性提供了统一的入口；
• 在生命周期beforeCreate之前创建的，所以无法获取到this，也无法使用data，method中的数据和方法。

(6) setup中定义变量

在模板(template)中使用，一定要return变量

 setup() {
    let username = "qiqi";
    let sayHi = ()=>{
      console.log("hello "+ username)
    }
    return {username,sayHi}
  },

定义响应式变量，将来数据变化，模板中的渲染会自动刷新

  setup() {
    let obj = reactive({
      username : "qiqi"
    })
    let change = (()=>{
      obj.username = "qiuqiu"
    })
    return {obj,change}
  },