01.setup,reactive,ref,computed,watch学习---2023新版Vue3基础入门到实战项目

1.Vue3组合式

2.创建vue3项目

2.1认识create-vue

create-vue是官方新的脚手架工具，vite下一代构建工具

node -v >16

npm init vue@latest

2.2 setup

原始写法

<script>
export default {
  //执行时机比beforeCreate早
  //获取不到this
  //数据和函数必须return出去
  setup() {
    //数据
    const message = 'hello vue3'
    //函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message, logMessage
    }
  },
  beforeCreate() {
    console.log('beforeCreate函数')
  }
}
</script>
<template>
  <h1>{{ message }}</h1>
  <button @click="logMessage">点我</button>
</template>

语法糖写法：

<script setup>
const message = 'this is message'
const logMessage = () => {
  console.log(message);
}
</script>
<template>
  <h1>{{ message }}</h1>
  <button @click="logMessage">点我</button>
</template>

总结:

1.setup选项的执行时机？

beforeCreate钩子之前，自动执行

2.setup写代码的特点是什么？

定义数据+函数，然后以对象方式return

3.setup解决了什么问题？

经过语法糖的封装更简单的使用组合式API

4.setup中的this还指向组件实例吗？

不指向，组件实例还未创建，undefined

2.3 reactive()

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

<script setup>
//接收对象类型数据的参数传入，返回响应式对象
import { reactive } from 'vue'
const state = reactive({
  count: 100
})
const addOne = () => {
  state.count++
}
</script>
<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="addOne">+1</button>
  </div>
</template>

2.4 ref()

如果是简单类型，用ref() 推荐

接收简单类型和对象类型数据传入并返回响应式对象

本质是对传入数据包了一层，包成复杂类型之后，再借助reactive实现响应式。

脚本中访问数据需要通过.value，非脚本区域直接使用数据

<script setup>
//接收对象类型数据的参数传入，返回响应式对象
import { ref } from 'vue'
const count = ref(0)
console.log(count.value);
const addOne = () => {
  count.value++
}
</script>
<template>
  <div>
    <div>{{ count }}</div>
    <button @click="addOne">+1</button>
  </div>
</template>

总结：

1.reactive和ref函数共同作用是什么？

用函数调用的方式生成响应式数据

2.reactive vs ref?

reactive不能处理简单类型的数据

ref参数类型支持更好但是必须通过.value访问修改

ref函数的内部实现依赖于reactive函数

3.在实际工作中推荐使用哪个？

推荐使用ref函数，更加灵活统一

2.5 computed

最佳实践：不应该有副作用，异步请求，修改dom,避免直接修改计算属性的值。

<script setup>
import { ref, computed } from 'vue'
//声明数据
const list = ref(
  [1, 2, 3, 4, 5, 6, 7, 8]
)
//基于list派生一个计算属性，从list中过滤出 > 2
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>
    <button @click="addFn">修改</button>
  </div>
</template>

2.6 watch

侦听简单对象和复杂对象以及immediate和deep，精确侦听对象的某个属性

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const nickname = ref('张三')
const changeCount = () => {
  count.value++
}
const changeNickName = () => {
  nickname.value = nickname.value + '三'
}
//1.监视单个数据的变化
//watch(ref对象,(newValue,oldValue)=>{...})
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// })
// watch(nickname, (nv, ov) => {
//   console.log(nv, ov);
// })
//监视多个数据的变化
//watch([ref1,ref2],(newArr,oldArr)=>{...})
/* watch([count, nickname], (newArr, oldArr) => {
  console.log(newArr, oldArr);
}) */
//立刻执行immediate
/* watch([count, nickname], (newArr, oldArr) => {
  console.log(newArr, oldArr);
}, {
  immediate: true
}) */
//深度监视 deep,默认是浅层监视，ref简单类型，直接监视，ref2复杂类型，监视不到内部数据变化
const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  userInfo.value.age++
}
/* watch(userInfo, (nv, ov) => {
  console.log(nv, ov)
}, {
  deep: true//深度监视，对象子属性变化也能监视到
}) */
//对于对象中的属性来进行监视,固定写法
watch(() => userInfo.value.age, (nv, ov) => {
  console.log(nv, ov);
})
</script>
<template>
  <div>
    {{ count }}
  </div>
  <button @click="changeCount">改数字</button>
  <div>
    {{ nickname }}
  </div>
  <button @click="changeNickName">改昵称</button>
  <div>------------------------------------------</div><br>
  <div>{{ userInfo }}</div>
  <button @click="setUserInfo">修改userinfo</button>
</template>

总结：

1.watch第一个参数需要加.value吗？

不需要

2.只能侦听单个数据吗？

单个或者多个

3.不开启deep，直接监视复杂类型，修改属性，能触发回调吗？

不能，默认浅层监听

4.不开启deep，精确侦听对象的某个属性？

可以把第一个参数写成函数的写法，返回要监听的具体属性。