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

vue3项目的创建:

npm init vue@latest

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

然后再命令行依次执行:

javascript 复制代码
// 进入项目
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):

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

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

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

语法糖:<script setup>

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

总结:

setup的执行时机:在beforeCreate钩子执行之前,自动执行

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

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

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

组合式API rective和ref

reactive():接收对象类型数据的参数并返回一个响应式的对象

javascript 复制代码
import { reactive } from 'vue'
const state = reactive({
  count: 0
})
const good =  () => {
  state.count++
}
<button @click="good">{{ state.count }}</button>

ref() :接收对象类型数据和基本的类型数据的参数并返回一个响应式的对象

javascript 复制代码
import {ref} from 'vue'
const state = ref(0)
const good =  () => {
  state.value++
}
<button @click="good">{{ state }}</button>

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

总结:

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

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

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

watch函数

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

监听单个数据:

javascript 复制代码
<script setup>
import { ref,watch} from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
watch(count,(newVal,oldVal) => {
  console.log('count变化了',newVal,oldVal)
})
</script>
<template>
  <div>
    <button @click="setCount">{{ count }}</button>
  </div>
</template>

监听多个数据:

javascript 复制代码
<script setup>
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]
    )
  }
)
</script>
immediate:在监听器创建时立即触发回调,响应式数据变化之后继续执行回调

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

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

javascript 复制代码
<script setup>
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方法
</script>
<template>
  <div>
    原始响应式数据{{ list }}
    计算后的数据{{ computedList }}
  </div>
</template>
相关推荐
cs_dn_Jie11 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf2 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据2 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554323 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel