Vue3 学习 - 技术栈

Vue3核心语法

3.2拉开序幕的setup

setup概述

setup是Vue3中一个新配置项，值是一个函数，它是Composition API"表演舞台"：数据、方法、计算属性、监视...等等，均配置在setup中。

特点如下：

setup返回的对象中的内容，可直接在模板中使用

setup与Options API的关系

vue2的配置中可以访问到setup中的属性、方法
但在setup中不能访问到vue2的配置
如果与vue2冲突，则setup优先

setup语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去：

复制代码

<template>
<div class="person">
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
<h2>地址：{{ address }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>  

</div>
</template>

<script lang="ts" setup name="Person234">
   //数据，原来是写在data中的，此时的name，age，tel都不是响应式数据
  let name = '张三'  //注意此时的name不是响应式的
  let age = 18  //注意此时的age不是响应式的
  let tel = '13888888888'  //注意此时的tel不是响应式的
  let address = '北京昌平区宏福苑'

  //方法
  function changeName (){
    name = 'zhang-san'  //注意：这样修改name，页面是没有变化的
    console.log(name);  //name确实改了，但name不是响应式的
    
  }
  function changeAge (){
    age+=1         //注意：这样修改age，页面是没有变化的
    console.log(age);   //age确实改了，但age不是响应式的
  }
  function showTel (){
    alert(tel)       
  }

</script>

<style scoped>
	.person{
		background-color: skyblue;
		box-shadow: 0 0 10px;
		border-radius: 10px;
		padding: 20px;
	}
	button{
		margin: 0 5px;
	}
</style>

3.3ref创建：基本类型的响应式数据

作用：定义响应式变量
语法：let xxx = ref（初始值）
返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

注意点：

JS中操作需要：xxx.value，但模板中不需要.value，直接使用即可

对于let name = ref（'张三'）来说，name不是响应式的，name.value是响应式的

复制代码

  <template>
  <div class="person">

  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>地址：{{ address }}</h2>
  <button @click="changeName">修改名字</button>
  <button @click="changeAge">修改年龄</button>
  <button @click="showTel">查看联系方式</button>  

  </div>
  </template>

  <script lang="ts" setup name="Person">
  	import {ref} from 'vue'
  //数据，原来是写在data中的，此时的name，age，tel都不是响应式数据
  let name = ref('张三')  //注意此时的name不是响应式的
  let age = ref(18)  //注意此时的age不是响应式的
  let tel = '13888888888'  //注意此时的tel不是响应式的
  let address = '北京昌平区宏福苑'

  //方法
  function changeName (){
   name.value = 'zhang-san'  //注意：这样修改name，页面是没有变化的
  console.log(name.value);  //name确实改了，但name不是响应式的

  }
  function changeAge (){
  age.value += 1         //注意：这样修改age，页面是没有变化的
  console.log(age.value);   //age确实改了，但age不是响应式的
  }
  function showTel (){
  alert(tel)       
  }

  </script>

  <style scoped>
  .person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
  }
  button{
  margin: 0 5px;
  }
  </style>

ref---可以定义：基本类型、对象类型的响应式数据
reactive---只能定义：对象类型的响应式数据

3.6ref对比reactive

宏观角度看：

1.ref用来定义：基本数据类型、对象数据类型

2.reactive用来定义：对象类型数据

** 区别 **：

1.ref创建的变量必须使用.value

2.reactive重新分配一个新对象，会失去响应式
使用规则 ：

1.若需要一个基本类型的响应式数据，必须使用ref

2.若需要一个响应式对象，层级不深，ref和reactive都可以

3.若需要一个响应式对象。且层级比较深，推荐使用reactive

3.7toRefs与toRef

作用：将一个响应式对象中的每一个属性，转换为ref对象

备注：toRefs与toRef功能一致，但toRefs可以批量转换

复制代码

  <script lang="ts" setup name="Person">
  import {reactive,toRefs}from 'vue'
  /	/数据
  	let person = reactive({
		name:'张三',
		age:18
  })
  	let {name,age} = toRefs(person)
  	console.log(name,age);

  	//方法
  	function changeName(){
		name.value += '~'
  }
  	function changAge(){
		age.value += 1
  }
  </script>

computed属性计算

首先需要import引入computed

watch监视

作用：监视数据的变化

特点：Vue3中的watch只能监视以下四种数据：

复制代码

  1.ref定义的数据
  2.reactive定义的数据
  3.函数返回一个值
  4.一个包含上述内容的数组

情况一

监视ref定义的基本类型数据：直接写数据名即可，监视的是其value值的改变

情况二

监视ref定义的【对象类型】数据：直接写数据名。监视的对象是【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为他是同一个对象
若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了

情况三

监视reactive定义的【对象类型】数据，且默认开启了深度监视

情况四

监视ref或reactive定义的【对象类型】数据中的某个属性 ，注意点如下：

1.若该属性不是【对象类型】，需要写成函数形式。

2.若该属性值依然是【对象类型】，可直接编，也可写成函数，不过建议写成函数

getter函数能返回一个值的函数

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视

复制代码

  <template>
  	<div class="person">
  	<h2>姓名:{{ person.name }}</h2>
  	<h2>年龄:{{ person.age }}</h2>
  	<h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
  	<button @click="changeName">修改名字</button>
  	<button @click="changeAge">修改年龄</button>
  	<button @click="changeC1">修改第一台车</button>
  	<button @click="changeC2">修改第二台车</button>
  	<button @click="changeCar">修改第整个车</button>
  	</div>
  </template>

  <script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  //数据
  let person = reactive({
  	name:'张三',
  	age:18,
  	car:{
		c1:'奔驰',
		c2:'宝马'
  	}
  })

  //方法
   function changeName(){
  		person.name += '~'
   }
  function changeAge(){
  	person.age += 1
  }
  function changeC1(){
  	person.car.c1 = '奥迪'
  }
  function changeC2(){
  	person.car.c2 = '大众'
  }
  function changeCar(){
  	person.car = {c1:'雅迪',c2:'爱玛'}
  }
  //监视，情况四：监视响应式对象中某个属性，且该属性时基本类型的，要写成函数式
  /* watch(()=>person.name,(newValue,oldValue)=>{
  	console.log('person.name变化了',newValue,oldValue);
  }) */
  //监视，情况四：监视响应式对象中某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  	watch(()=>person.car,(newValue,oldValue)=>{
  		console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
  </script>

情况五

监视上述多个数据