助你丝滑过度到 Vue3 Setup&数据监视 ②⑤

@作者 : SYFStrive

 

@博客首页 : HomePage

： VUE3~TS

：个人社区（欢迎大佬们加入） ：社区链接

：觉得文章不错可以点点关注 ：专栏连接

TypeScript（） 微信小程序（） UNIAPP开发（）

---

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

提示：以下是本篇文章正文内容

VUE3 JS

---

简介 ： 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者

• github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

• 官方

0. 国内爱好者官网 ：https://vue3js.cn/
1. 中文 ： https://www.javascriptc.com/vue3js/
2. 英文 ： https://cn.vuejs.org/
3. Vue 相关包 ： https://github.com/vuejs/awesome-vue
4. Vue 相关插件 ： https://awesomejs.dev/for/vue/
5. Vue API ：https://cn.vuejs.org/api/

常用 Composition API

官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

拉开序幕的Setup

1. 理解：Vue3.0中一个新的配置项，值为一个函数。
2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
3. 组件中所用到的：数据、方法等等，均要配置在setup中。
4. setup函数的两种返回值：
   1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

返回 1个对象及 与 Vue2 进行对比 代码演示 ↓

<template>
  <h1>一个人的信息</h1>
  <h2>Vue3name姓名：{{ Vue3name }}</h2>
  <h2>Vue3age年龄：{{ Vue3age }}</h2>
  <h2>vue2sex性别：{{ vue2sex }}</h2>
  <h2>vue2a的值是：{{ vue2a }}</h2>
  <button @click="Vue3SayHello">说话(Vue3所配置的——Vue3SayHello)</button>
  <br>
  <br>
  <button @click="vue2SayWelcome">说话(Vue2所配置的——vue2SayWelcome)</button>
  <br>
  <br>
  <button @click="vue2Test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
  <br>
  <br>
  <button @click="Vue3Test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      vue2sex: '男',
      vue2a: 100
    }
  },
  methods: {
    vue2SayWelcome() {
      alert('初始Setup配置！')
    },
    vue2Test1() {
      console.log(this.Vue3name)
      console.log(this.Vue3sex)
      console.log(this.Vue3age)
      console.log(this.Vue3a)
      console.log(this.Vue3SayHello)
    }
  },
  //此处只是测试一下setup，暂时不考虑响应式的问题。
  setup() {
    //数据
    let Vue3name = '张三'
    let Vue3sex = '男'
    let Vue3age = 18
    let Vue3a = 200

    //方法
    function Vue3SayHello() {
      alert(`我叫{Vue3name}，我{Vue3age}岁了，你好啊！`)
    }
    function Vue3Test2() {
      console.log(this.vue2sex)
      console.log(this.vue2a)
      alert('你会发现读取不到Vue2设置的配置数据！\n所以请不要Vue2和Vue3混合着使用！')
    }

    //返回一个对象（常用）
    return {
      Vue3name,
      Vue3sex,
      Vue3age,
      Vue3a,
      Vue3SayHello,
      Vue3Test2,
    }

  }
}
</script>

函数渲染 代码演示 ↓

<template></template>
<script>
import { h } from 'vue'
export default {
  name: 'App',
  //此处只是测试一下setup，暂时不考虑响应式的问题。
  setup() {
    //返回一个函数（渲染函数）
    return () => h('h1', '函数渲染！')
  }
}
</script>

5. 注意点：
   1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
      • 如果有重名, setup优先。
   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

Setup的两个注意点

• setup执行的时机
  • 在beforeCreate之前执行一次，this是undefined。
    –
• setup的参数
  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context：上下文对象
    1. attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.attrs。
    2. slots: 收到的插槽内容, 相当于 this.slots。
    3. emit: 分发自定义事件的函数, 相当于 this.emit。

• App代码演示 ↓

<template>
  <HelloWorld @hello="showHelloMsg" msg="你好啊" school="程序员">
    <template v-slot:qwe>
      <span>插槽1</span>
    </template>
    <template v-slot:asd>
      <span>插槽2</span>
    </template>
  </HelloWorld>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: { HelloWorld },
  setup() {
    function showHelloMsg(value) {
      alert(`你好啊，你触发了hello事件，我收到的参数是:{value}！`)
    }
    return {
      showHelloMsg
    }
  }
}
</script>

• HelloWorld 代码演示 ↓

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>props参数 :{{ msg }} ~ {{ school }}</h2>
  <slot name="qwe"></slot> <br>
  <slot name="asd"></slot> <br><br>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'HelloWorld',
  props: ['msg', 'school'],
  emits: ['hello'],

  setup(props, context) {
    console.log('---setup---', props) //props参数
    console.log('---setup---', context) //上下问
    console.log('---setup---', context.attrs) //相当与Vue2中的attrs
    console.log('---setup---', context.emit) //触发自定义事件的。
    console.log('---setup---', context.slots) //插槽

    //数据
    let person = reactive({
      name: '张三',
      age: 18
    })

    //方法
    function test() {
      context.emit('hello', 666)
    }

    //返回一个对象（常用）
    return {
      person,
      test
    }
  }
}
</script>

计算属性与监视

     1、Computed函数

• 与Vue2.x中computed配置功能一致

• 写法 ↓

<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName">
  <br>
  名：<input type="text" v-model="person.lastName">
  <br>
  <span>全名：{{ person.fullName }}</span>
  <br>
  全名：<input type="text" v-model="person.fullName">
</template>

<script>
import { reactive, computed } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    //数据
    let person = reactive({
      firstName: '张',
      lastName: '三'
    })

    //计算属性—简写（没有考虑计算属性被修改的情况）
    // person.fullName = computed(() => {
    //   return person.firstName + '-' + person.lastName
    // })

    //计算属性——完整写法（考虑读和写）
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })

    //返回一个对象（常用）
    return {
      person
    }
  }
}
</script>

     2、Watch函数

• Vue3 与 Vue2.x中 Watch 配置功能一致

• 两个小 坑：

  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效。

//数据
let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
   name:'张三',
   age:18,
   job:{
   	j1:{
   		salary:20
   	}
   }
})

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

//返回一个对象（常用）
return {
   sum,
   msg,
   person
}

     3、监视Ref数据的说明

• 代码演示

<template>
	<h2>当前求和为：{{ sum }}</h2>
	<button @click="sum++">点我+1</button>
	<hr>
	<h2>当前的信息为：{{ msg }}</h2>
	<button @click="msg += '！'">修改信息</button>
	<hr>
	<h2>姓名：{{ person.name }}</h2>
	<h2>年龄：{{ person.age }}</h2>
	<h2>薪资：{{ person.job.j1.salary }}K</h2>
	<button @click="person.name += '~'">修改姓名</button>
	<button @click="person.age++">增长年龄</button>
	<button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { ref, watch } from 'vue'
export default {
	name: 'Demo',
	setup() {
		//数据
		let sum = ref(0)
		let msg = ref('你好啊')
		let person = ref({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})

		console.log(person)

		watch(sum, (newValue, oldValue) => {
			console.log('sum的值变化了', newValue, oldValue)
		})

		watch(person, (newValue, oldValue) => {
			console.log('person的值变化了', newValue, oldValue)
		}, { deep: true })


		//返回一个对象（常用）
		return {
			sum,
			msg,
			person
		}
	}
}
</script>

     4、WatchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed ↓

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

小案例演示

<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { ref, reactive, watchEffect } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    //数据
    let sum = ref(0)
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    watchEffect(() => {
      const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log('WatchEffect所指定的回调执行了')
    })

    //返回一个对象（常用）
    return {
      sum,
      person
    }
  }
}
</script>

最后

以上是个人学习Vue3的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波