vue3 项目的创建、组合式API、rective和ref、watch函数

07-21 1413阅读

vue3项目的创建：

npm init vue@latest

在执行上述代码以后，按需勾选项目所需的东西就可以

（图片来源网络，侵删）

然后再命令行依次执行：

// 进入项目
cd vuedemo
//安装下来对应的包
npm install
//启动项目
npm run dev

文件解读：

package.json ：相关的依赖

vite.config.js ：项目的配置文件（基于vite）添加一些工具和插件

main.js ：creatApp创建一个应用实例对象，import导入组件和样式文件css等 mount方法做挂载操作，creatApp函数创建应用实例

index.html ：提供了id作为app的挂载点

组合式API 入口（setup）：

是vue3提供的一个语法糖，写上了setup就可以直接写组合式api

在setup{ }中定义的数据和方法必须return出去才可以使用

vue3中的this 并不指向我们的组件实例，会undefine

语法糖：

使用语法糖以后就不用setup{ }了，在里面定义的数据和方法也不用return了

总结：

setup的执行时机：在beforeCreate钩子执行之前，自动执行

setup写代码的特点：定义数据+函数然后以对象的方式retrurn

语法糖：更简单的使用组合式API

setup中的this不再指向组件实例，而是指向undefine

组合式API rective和ref

reactive（）：接收对象类型数据的参数并返回一个响应式的对象

import { reactive } from 'vue'
const state = reactive({
  count: 0
})
const good =  () => {
  state.count++
}
{{ state.count }}

ref（）：接收对象类型数据和基本的类型数据的参数并返回一个响应式的对象

import {ref} from 'vue'
const state = ref(0)
const good =  () => {
  state.value++
}
{{ state }}

注意：在脚本区域修改ref的话就需要使用ref.data

总结：

reactive和ref ：都用来生成响应式数据

reactive vs ref：reactive不能处理简单的数据类型，ref在script中必须通过.value访问

在实际的开发过程中我们通常使用ref函数

watch函数

作用：监听数一个或者多个数据的变化，数据变化时执行回调函数，两个额外的参数：1、immediate（立即执行）2、deep（深度监听）

监听单个数据：

import { ref,watch} from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
watch(count,(newVal,oldVal) => {
  console.log('count变化了',newVal,oldVal)
})


  
    {{ count }}

监听多个数据：

import { ref,watch} from 'vue'
const count = ref(0)
const changeCount = () => {
  count.value++
}
const name = ref('con')
const changeName = () => {
  name.value = 'pc'
}
watch(
  [count,name],
  (
    [newCount,newName],
    [oldCount,oldName]
  ) => {
    console.log('有值发生变化了',[newCount,newName],
      [oldCount,oldName]
    )
  }
)

immediate：在监听器创建时立即触发回调，响应式数据变化之后继续执行回调

1、除了做计算剩下的都不要做，不然会降低性能

2、计算出来的值不能直接去修改前台的页面中的值，计算出来的是只读的

import { ref } from 'vue'
import { computed } from 'vue'
const list = ref([1,2,3,4,5,6,7,8])
const computedList = computed(()=>{
  return list.value.filter(item => item >2)
 // return list.value.filter((item) => item >2)
})
setTimeout(() => {
  list.value.push(9,10)
},3000)
//filter方法


  
    原始响应式数据{{ list }}
    计算后的数据{{ computedList }}

VPS购买请点击我