组合式API-reactive和ref函数,computed计算属性,watch函数

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

javascript 复制代码
<script setup>
import {reactive} from 'vue'
const state = reactive({
  count:100
})
const setCount =() => {
  state.count++
}
</script>
<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

二.ref()接收简单类型或者对象类型的数据传入并返回一个响应式对象

推荐声明数据,统一用ref

注意:脚本中访问数据,需要通过.value

在template中,.value不需要加(自动扒掉了一层)

javascript 复制代码
<script setup>
import {ref} from 'vue'
const count = ref (0)
const setCount = () => {
  count.value ++
}
</script>
<template>
  <div>{{ count }}</div>
  <button @click="setCount">+1</button>
</template>

三.computed计算属性

const 计算属性 = computed (() => {

return 计算返回的结果

}

javascript 复制代码
<script setup>
import {computed,ref} from 'vue'
const list = ref([
  1,2,3,4,5,6,7,8
])
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})
</script>

<template>
  <div>
    <div>原始数据:{{ list }}</div>
    <div>计算后数据:{{ computedList }}</div>
  </div>
</template>

增加一个修改函数

javascript 复制代码
<script setup>
import {computed,ref} from 'vue'
const list = ref([
  1,2,3,4,5,6,7,8
])
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})

const addFn = () =>{
list.value.push(666)
}
</script>

<template>
  <div>
    <div>原始数据:{{ list }}</div>
    <div>计算后数据:{{ computedList }}</div>
  </div>
  <button @click="addFn">修改添加</button>
</template>

注意:计算属性不应该有"副作用",比如异步请求/修改dom

避免直接修改计算属性的值,计算属性应该是只读的,特殊情况可以配置get set

四.watch函数

作用:侦听一个或者多个数据的变化,数据变化时执行回调函数

俩个额外参数:1.immediate(立即执行) 2.deep(深度侦听)

1,侦听单个数据

  • 导入watch函数
  • 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

watch(ref对象,(newValue,oldValue) => {...} )

javascript 复制代码
<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')
const changeCount = () =>{
  count.value++
}
const changeNickname = () =>{
  nickname.value = '李四'
}
//1.监视单个数据变化
// watch(ref对象,(newValue,oldValue) => {...})
watch(count,(newValue,oldValue) => {
  console.log(newValue,oldValue)
})

<template>
  <div>{{ count }}</div>
  <button @lick="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeNickname">改昵称</button>
</template>

2,侦听多个数据

watch( [ref对象1,ref对象2],(newArr,oldArr) => {...} )

javascript 复制代码
<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')
const changeCount = () =>{
  count.value++
}
const changeNickname = () =>{
  nickname.value = '李四'
}
</script>
<template>
  <div>{{ count }}</div>
  <button @lick="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeNickname">改昵称</button>
</template>
相关推荐
Martin -Tang几秒前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发1 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html