0


vue3基础教学(1)

1.性能的提升

  • 打包大小减少41%
  • 初次渲染快55%, 更新渲染快133%
  • 内存减少54%

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式
  • 重写虚拟DOM的实现和Tree-Shaking

3.支持TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API(组合API)- setup配置- refreactive- watchwatchEffect- provideinject
  2. 新的内置组件- Fragment- Teleport- Suspense
  3. 其他改变- 新的生命周期钩子- data 选项应始终被声明为一个函数- 移除keyCode支持作为 v-on 的修饰符

1.创建一个Vue项目

  1. ## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
  2. vue --version
  3. ## 安装或者升级你的@vue/cli
  4. npm install -g @vue/cli
  5. ## 创建Vue项目,选择Vue3
  6. vue create vue_test
  7. ## 启动
  8. cd vue_test
  9. npm run serve

当然也可以用可视化面板创建

创建项目的时候预设选择Vue3即可

2. 使用 vite 创建

官方文档:v3.cn.vuejs.org/guide/insta…

vite官网:vitejs.cn

  • 什么是vite?—— 是Vue团队打造的新一代前端构建工具。
  • 优势如下:- 开发环境中,无需打包操作,可快速的冷启动。- 轻量快速的热重载(HMR)。- 真正的按需编译,不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比:传统构建模式,是将所有资源都打包好,再上线,而Vite有点按需加载的意思
  • 接下来我们就用Vite来创建一个Vue3的项目

## 创建工程
npm init vite-app lee_vue3
## 进入工程目录
cd lee_vue3
## 安装依赖
npm install
## 运行
npm run dev
  • 构建速度明显vite快。
  • 3、分析文件目录

  • Vue2项目的main.js


import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

我们再来看看组件

template

标签里可以没有根标签了


<template>
    <!-- Vue3组件中的模板结构可以没有根标签 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

3. 常用的Composition API

setup
  1. 理解:Vue3.0中一个新的配置项,值为一个函数。
  2. setup是所有Composition API(组合API)“ 表演的舞台 ”
  3. 组件中所用到的:数据方法等等,均要配置在setup中。
  4. setup函数的两种返回值: 1. 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)2. 若返回一个渲染函数:则可以自定义渲染内容。(了解) (不常用)

<template>
  <h1>博主的信息</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>性别:{{sex}}</h2>
  <button @click="sayInfo">显示信息</button>
</template>
 
<script>
// import {h} from 'vue'
export default {
  name: "App",
  //此处只是测试一下setup,暂时不考虑响应式的问题。
  setup(){
    // 数据
    let name = "张三"
    let age = 18
    let gender = "男"
 
    // 方法
    function sayInfo(){
      alert(`你好${name},吃饭了吗`)
    }
    return {
      name,age, gender,sayInfo
    }
    // return ()=> h('h1','张三')
  }
};
</script>

如果返回的是渲染函数

那你在

template

里写的模板都不奏效了,页面渲染的就是你写的h函数中的

  1. 注意点: 1. 尽量不要与Vue2.x配置混用 - Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。- 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。- 如果有重名, setup优先。2. setup不能是一个async函数,因为返回值不再是对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

ref

函数

  • 作用: 定义一个响应式的数据
  • 语法: const xxx = ref(initValue)- 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。- JS中操作数据: xxx.value- 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
  • 备注: - 接收的数据可以是:基本类型、也可以是对象类型。- 基本类型的数据:响应式依靠的是类上的gettersetter完成的(我们等下看下源码你就知道了)。- 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
<template>
  <h1>博主的信息</h1>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>职业: {{ job.type }}</h2>
  <h2>工资:{{ job.sex }}</h2>
  <button @click="sayInfo">显示信息</button>
  <button @click="changeInfo">修改信息</button>
</template>
 
<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // 数据
    let name = ref("张三");
    let age = ref(18);
    let job = ref({
      type: "前端工程师",
      sex: "30K",
    });
    // 方法
    function sayInfo() {
      alert(`你好${name.value},薪水也${job.value.sex}这么高`);
    }
    function changeInfo() {
      name.value = "三十年后的张三";
      age.value = 58;
      job.value.type = "退休老干部";
      job.value.sex = "80K";
    }
    return {
      name,
      age,
      job,
      sayInfo,
      changeInfo,
    };
  },
};
</script>

通过看源码可以知道调用ref会返回一个RefImpl的实例对象,是reference引用和implement实现的缩写,RefImpl类中有getter和setter可以检测到数据的变化

reactive

函数

  • 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
  • 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
  • reactive定义的响应式数据是“深层次的”。
  • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。
<template>
  <h1>博主的信息</h1>
  <h2>姓名:{{ lee.name }}</h2>
  <h2>年龄:{{ lee.age }}</h2>
  <h2>职业: {{ lee.job.type }}</h2>
  <h2>工资:{{ lee.job.salary }}</h2>
  <h2>爱好:{{ lee.hobby }}</h2>
  <h3>测试数据:{{ lee.job.a.b.c }}</h3>
  <button @click="changeInfo">修改信息</button>
</template>
 
<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    // 数据
    let lee = reactive({
      name: "张三",
      age: 28,
      hobby: ["写博客", "研究前端", "看电影"],
      job: {
        type: "前端工程师",
        salary: "30K",
        a: {
          b: {
            c: 111,
          },
        },
      },
    });
 
    // 方法
    function changeInfo() {
      lee.name = "三十年后的张三";
      lee.age = 58;
      lee.job.type = "退休老干部";
      lee.job.salary = "80K";
      lee.job.a.b.c = 222;
      // 直接通过数组下标修改,可以触发响应式
      lee.hobby[0] = "看小说";
    }
    return {
      lee,
      changeInfo,
    };
  },
};
</script>

本文转载自: https://blog.csdn.net/Taojia9958/article/details/126147886
版权归原作者 I`ivresse 所有, 如有侵权,请联系我们删除。

“vue3基础教学(1)”的评论:

还没有评论