Vue3 入门第一篇,到ref与reacive响应式数据

上铺的老家伙
206 阅读3分钟

体验vue3

image.png

v2语法的代码

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    add(){
      this.count++
    }
  }
}
</script>

v3的语法

<script setup>
import { ref } from 'vue'
const count = ref(0)
const add = ()=> count.value++
</script>

vue3的特点

image.png

  1. 代码量变少
  2. 分散式维护变成集中式维护
  3. v3对v2的兼容性很好

相比于vue2的区别

1.组合式API

2.更好的支持TS

3.重写diff算法

4.模板变异优化(默认每一个文件都是模块)

5.TreeShaking

6.按需引入(写的多了会发现干的最多的就是引入)

7.采用Proxy数据响应式

使用create-vue搭建Vue3项目

认识create-vue

create-vue是一个脚手架工具，用来快速创建v3的项目。（Vuecli用来创建v2的项目） create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令，这一指令将会安装并执行 create-vue npm init vue@latest

运行之后在网页中会出现如下

image.png

上面的启动页中，列出了很多的学习资源，可以参考学习.

熟悉V3的项目目录和关键文件

package.json

vue的版本是3 + 依赖vite做底层驱动

vite.config.js

配置文件。类似vue2的vue.config.js。

业务文件夹src/main.js

new Vue() 创建vue的实例对象

createApp也是用来创建vue的实例对象

createApp(App).mount('#app')

mount('#app') 把vue的实例对象挂载在index.html的#app元素上

App.vue

  1. script -> template -> style
  2. script 上的setup是一个特殊的开关：
    1. 打开之后，就可以使用组合式api
    2. 不打开它，就可以继续兼容v2的写法

  1. template中可以不需要唯一的根元素的区别

image.png

组合式API - setup选项

1. setup选项的写法和执行时机

格式

类似于生命周期钩子的写法。

<script>
  export default {
    setup(){
      console.log('setup')
    },
    beforeCreate(){
      console.log('beforeCreate')
    }
  }
</script>

执行时机

在beforeCreate钩子之前执行setup函数

setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。

image.png

setup 语法糖

如果要定义很多的数据，在模板中使用，那是不是要：1. 定义很多个数据。2. 写一个长长return？在v3中，它提供了setup语法糖

script标签添加 setup标记，不需要再写return语句，默认会添加return语句

image.png

这个语法糖其实只是方便我们程序员书写代码,通过编译我们会发现,编译后的代码其实是和不使用语法糖是一致的

image.png

组合式API - reactive和ref函数

1. reactive

作用

接收对象类型数据的参数传入并返回一个响应式的对象

步骤

  1. 从vue包中导入reactive函数
  2. 在的初始值，使用变量接收返回值

示例代码

   <script setup>
import { reactive } from 'vue'  // 导入

const state = reactive({       // 执行函数 传入参数 变量接收
  count:0
})
const add = ()=>{
  state.count++ // 修改数据更新视图
}
</script>

<template>
 <button @click="add">{{state.count}}</button>
</template>

注意：

  1. 普通对象不是响应式的，可以正常访问，但是，不具备响应式的特点：修改数据之后，视图不会更新
  2. reactive必须要传入一个类型为对象的数据，不支持基本数据类型。 vue提供了更加适用的ref函数。

2. ref

作用

接收简单类型或对象类型数据的参数传入并返回一个响应式的对象

步骤

  1. 从vue包中导入ref函数
  2. 在 script setup中执行ref函数并传入初始值，使用变量接收返回值

在模板中使用数据不需加.value

在代码中使用数据要加.value

示例

    <script setup>
 import { ref } from 'vue' // 导入
 const setCount = ()=>{  // 执行函数 传入参数 变量接收
   console.log(count)
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

3. reactive 对比 ref

  1. 相同点：都是用来生成响应式数据
  2. 不同点
    1. reactive不能处理简单类型的数据
    2. ref参数类型支持更好，但是必须通过.value做访问修改
    3. ref函数内部的实现依赖于reactive函数

cdn.bootcdn.net/ajax/libs/v…

function ref -> createRef -> new RefImpl -> constructor -> toReactive -> reactive

  1. 在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担

今天暂时写到这,明天从compued计算属性写起

avatar
文章
阅读
粉丝