vue3基础入门以及常用api使用

setup

setup 的返回值可以是函数

data(){
return {
a:'111',
c:this.name
}
},
setup(){
let name = '1111'
return ()=> '哈哈哈'
}//结果页面就是会显示 哈哈哈

setup和 OptionsAPI关系
data能和setup能同时存在，但不建议
data能读到setup里边的数据 setup是最早的生命周期 setup比data执行的要早

setup语法糖

想要组件name 和setup用一个script 可以用一个插件 npm i vite-plugin-vue-setup-extend -D

vite.config.js 文件中 引入

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
plugins:[
vue(),
VueSetupExtend()
]
//然后在script写即可
<script setup name='Person234'>

ref

ref 实现对象类型响应式 深层次也是借助于reactive实现的

reactive

reactive重新分配一个对象，会失去响应式，用 Object.assign(car,{brand:‘品牌’}) 分配对象 car是个reactive对象

ref定义对象，要是重新分配对象可以直接car.value = {}

如果定义基本类型响应式数据，用ref
定义层级不深的对象数据，ref和reactive都行
定义层级深的，建议用reactive

toRefs和toRef

toRef是就是把对象类型中的每一个参数单拎出来变成ref
let age = toRef(person,‘age’)//把person里边的age解构出来
let { age,name} = person
let { age,name} = toRefs(person)

computed

有缓存

//只读
const aa = computed(()=>{
return '1111'
})

let firstName = ref('zhang')
let lastName  = ref('san')
//可读可写
let fullNmae = computed({
get(){
return firstName + '_'+ lastName
},
set(val){
//val就是fullName.value赋值拿到的，这里是'12345'
console.log('set',val)
let [str1,str2] = val.split('_')
firstName.value = str1
lastName.value = str2
}
})
这时候就可以 fullNmae.value = 'li-si'//得有set(){}

watch

vue3中watch只能监视以下四种数据：
1、ref定义的数据
2、reactive定义的数据
3、函数返回的一个值（getter函数->能返回一个值的函数）
4、一个包含上述内容的数组

//监听基础类型的ref,不需要.value
let count = ref(0)
watch(count,(newVal,oldVal)=>{
console.log(newVal,oldVal)
})
//情况一：监听对象类型的ref,他只是监听对象的地址值，
let person = ref({
age:12,
name:'张三'
})
watch(person,(newVal,oldVal)=>{
console.log(newVal,oldVal)
//更改person 属性 person.value.name='11' 并不会打印
//更改person整个值才会走watch  person.value = { name:'11',age:10}
})
//-----------------------------------------------------------
//情况二：若想监听ref对象中的属性变化，使用deep:true
function changeName() {
  person.value.name = '李四'
}
function changeAge() {
  person.value.age = 20
}
function changePerson() {
  person.value = {
    name: '王五',
    age: 20
  }
}
watch(person,(newVal,oldVal)=>{
console.log(newVal,oldVal)
},
{
deep:true
}
)
//会出现情况是:
//单纯更改其中参数，监听打印的是Proxy(Object) {name: '李四', age: 20} Proxy(Object) {name: '李四', age: 20}
//可以假设成person的{name:xx,age:xx}是一个房子，改其中的参数只是改房子里边的东西，房子没变，所以每次监听房子新值和旧值一样
//更改整个person参数才会是Proxy(Object) {name: '王五', age: 20} Proxy(Object) {name: '李四', age: 20}
//---------------------------------------------------------
//情况三：监视reactive定义的对象数据，更改参数和整个对象都会受到监视，默认是开启深度监视的,而且用deep:false是不可以的
//但是打印新值和旧值是一样的，因为房子没变
let obj = reactive({
 a:{
 b:{
 c: 10
 }
 }
})
function changeTest() {
 obj.a.b.c = 20
}
watch(obj,(newVal,oldVal)=>{
console.log('obj变化了',newVal,oldVal)
},
{
deep:true
}
)
//-------------------------------------------------------------------------
//情况四：监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：
//1、若该属性值不是【对象类型】，需要写成函数形式
//2、若该属性值依然是对象类型，可直接编，也可写成函数，不过建议写成函数
let person = reactive({
 name:'张三',
 car:{
 c1:'大众'，
 c2:'比亚迪',
 }
})
function changeName() {
 person.name += '~'
}
//监视的reactive对象中属性不是对象类型，得用函数
watch(()=> person.name,(newVal,oldVal)=>{
console.log('person.name变化了',newVal,oldVal)
}
)
//每次person.name变化watch都监听，且新值和旧值不一样
//监听reactive对象中属性为对象时建议也是函数
//这时候直接修改person.car = { c1:'雅迪'c2:'爱玛'}也能监听到
watch(()=> person.car,(newVal,oldVal)=>{
console.log('person.name变化了',newVal,oldVal)
},{
deep:true
}
)
//-------下面这样修改car里边参数能监听比如更改c1和c2,但是直接修改car不会监听到，可以这么写但不建议----
watch(person.car,(newVal,oldVal)=>{
console.log('person.name变化了',newVal,oldVal)
})
//监视上述的多个数据，（把他们放到同一个数组里）
watch([()=>person.name,()=>person.car.c1],(newVal,oldVal)=>{
console.log('person.name变化了',newVal,oldVal)
})
//打印值也是数组['张三~'，'奔驰']

watchEffect

相比于watch,watchEffect不用特意指出监听的是哪个参数，且会立即运行一个函数，同时响应的追踪其依赖
比如同时监听多个参数时相对来说好一点，因为不用标注监听哪个参数

<script setup>
import { watchEffevt } from 'vue'
const count = ref(1)
watchEffect(()=>{
console.log(count.value)//当count变化时就会打印
})
</script>

标签的ref

 <h2 ref="title2">获取元素</h2>

import {ref} from 'vue'
//创建一个ref对象，用于存储ref标记的内容 创建名称要和元素ref=""中的名称一样
let title2 = ref()
//获取值用title2.value,即使两个vue文件中ref名称一样也不会冲突

//给组件加ref
<Person ref='person'/>
let person = ref()
//如何拿到子组件东西，需要子组件用defineExpose
//Person里边
import { defineExpose } from 'vue'//其实也不用引入
let a = ref(0)
let b = ref(1)
defineExpose({a,b})

props

//父
 <PersonInfo msg="aaa" />

//可能最新vue3不需要引入defineProps defineEmit 可以直接使用
import { defineProps } from 'vue'
//接受+同时将数据保存起来
let props = defineProps({
  msg: String
})
console.log(props.msg)//aaa
//情况一：只接受
defineProps(['msg'])
//情况二：接受+限制类型 Persons是自定义的type
defineProps<{list: Persons}>()
//情况三：接受list+限制类型+限制必要性+指定默认值
interface PersonInter {
name:string,
id:string,
age:number
}
type Persons = Array<PersonInter>

import { withDefaults } from 'vue'
const props = withDefaults(defineProps<Persons>(), {
  name: '',
  id: '',
  age: 10
  }} 
//给数组设置默认也需要加上箭头函数
const props = withDefaults(defineProps<{list?:Persons}>(), {
 list:()=>[{id:'123',name:'张三',age:10}]
  })
//情况四：使用箭头函数声明
const props = defineProps({
  List: {
    type: Array,
    required: true,
    default: () => [{ name: '文件1' }, { name: '文件2' }]
  }

provide和inject

      **方便props多层级透传**

有一些多层级嵌套的组件，形成了一棵巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去,这样使用也很麻烦，这时候就可以使用provide和inject

//祖先组件中使用provide
<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'age', /* 值 */ '11')
//例子
provide('age', '11')
</script>

//子组件中用inject使用父组件提供的值
<script setup>
import { inject } from 'vue'
const age = inject('age')
console.log('age', age)  //输出 11
</script>

生命周期

vue2和vue3对比

子组件先挂载完毕（onMounted），父再挂载完毕

自定义hooks

多个页面需要同一个功能就可以使用hooks,而且hooks里边能使用钩子例如onMounted等，还能用computed
useSum.ts

import { ref } from 'vue'
export function useSum() {
  const sum = ref(0)
  function add() {
    sum.value += 1
  }
  return { sum, add }
}

import { useSum } from 'xxx'
const { sum, add } = useSum()

原文地址：https://blog.csdn.net/wonderfulgood/article/details/141030186

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！