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>
相关推荐
Hong.19486 分钟前
vue本地调试设置虚拟域名
前端·javascript·vue.js
童欧巴7 分钟前
技术周刊 | 2024 前端趋势解读
前端·javascript·aigc
vvw&26 分钟前
使用同一个链接,如何实现PC打开是web应用,手机打开是一个H5应用
开发语言·前端·javascript·智能手机·面试题·每日一道前端面试题
LKID体37 分钟前
【python图解】数据结构之字典和集合
java·服务器·前端
命运之光1 小时前
【经典】抽奖系统(HTML,CSS、JS)
javascript·css·html
IT-sec1 小时前
jquery-picture-cut 任意文件上传(CVE-2018-9208)
android·前端·javascript·安全·web安全·网络安全·jquery
Rverdoser1 小时前
html渲染优先级
前端·html
2301_811274311 小时前
基于Vue+SpringBoot的考研学习分享平台设计与实现
vue.js·spring boot·考研
惜.己1 小时前
Jmeter中的配置原件
java·前端·数据库
Black蜡笔小新2 小时前
H.265流媒体播放器EasyPlayer.js网页全终端安防视频流媒体播放器可以播放本地视频吗
javascript·音视频·h.265