文章目录
前言
Vue3将作为主流。
一、常用Composition API
1 拉开序幕的setup
- Vue3中的一个新的配置项,值为一个函数。
- 组件中所用到的:数据、方法等等,均要配置在setup中。
- setup函数的两种返回值:
(1) 若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。(重点关注)
(2) 若返回一个渲染函数:则可以自定义渲染内容。(了解) - setup函数示例代码:
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<button @click="sayHello">说话</button>
</template>
<script>
// import {h} from 'vue'
export default {
name: 'App',
//此处只是测试setup函数,不考虑响应式问题
setup:function() {
//数据
let name = '张三'
let age = 18
//方法
function sayHello(){
alert(`我叫${name},我${age}岁了,你好啊!`)
}
//返回一个对象(常用)
return {
name,
age,
sayHello
}
//返回一个函数(渲染函数)
//渲染函数:h('要渲染的元素','渲染的元素中要显示的内容')
//return ()=>{return h('h1','Vue3')}
}
}
</script>
2 ref函数
- 作用:定义一个响应式的数据
- 语法:
const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
- JS中操作数据:
xxx.value
- 模板中读取数据:不需要.value,直接
<div>{{ xxx }}</div>
- 备注:
- 接收的数据可以是:基本类型、也可以是对象类型。
- 处理基本类型
- RefImpl ( reference implement) :引用实现;
- {}里是引用实现的实例对象,简称引用对象。
- RefImpl 中封装了
get
、set
方法。
示例代码如下:
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<button @click="changeInfo">修改个人信息</button>
</template>
<script>
//引入ref
import { ref } from 'vue'
export default {
name: 'App',
setup:function() {
//数据
let name = ref('张三') //数据传给 ref 函数
let age = ref(18)
//方法
function changeInfo(){
name.value='李四', //get、set均用.value代替
age.value=28,
console.log(name,age)
}
//返回一个对象(常用)
return {
name,
age,
changeInfo //注意Vue3必须将值和函数返回!!
}
}
}
</script>
效果图如下:
- 点击按钮后数据响应效果:
- 处理对象类型
//template标签
<h2>工作类型:{{ job.type }}</h2>
<h2>薪资水平:{{ job.salary }}</h2>
//数据
let job = ref({
type : '前端工程师',
salary : '30K'
})
//方法
function changeInfo(){
// name.value='李四',
// age.value=28,
// console.log(name,age)
job.value.type='UI设计师'
job.value.salary='60K'
}
3. reactive函数
4. Vue3的响应式原理
- 回顾Vue2的响应式原理
- 按住 Alt 键可以同时修改多行数据。
- Vue3的响应式原理_Proxy
- Proxy:代理
- Vue3的响应式原理_Reflect
- Reflect:反射
4 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: 'App',
setup:function() {
//数据
let person = reactive({
firstName:'张',
lastName:'三'
})
//计算属性
//computed 返回一个箭头函数或普通函数
//计算属性——简写(没有考虑计算属性被修改的情况)
// 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>
注:
- computed()简写形式,可返回一个箭头函数或普通函数;
- 完整形式返回一个对象,对象里由get(){} 和set(){} 方法;
- const nameArr = value.split(‘-’) :split方法,
值.split('分隔符')
5 watch函数
watch(监视的参数,监视的回调,监视的配置)