1.options api与composition api的区别
options api开发出来的应用每个选项都有自己的位置,响应式数据放在data里面,操作方法放在methods里面以及监听和计算属性也放在对应的watch和computed里面,但是面对功能庞大的项目维护起来很麻烦
composition api开发出来的应用可以将某一个功能的响应式数据,操作方法放在一起,两者是并存的关系
2.ref函数
作用:ref是一个函数,接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
<template>
<div>{{ money }}</div>
<button @click="changeMondy">改值</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
let money = ref(100)
console.log(money.value)
return {
money
}
}
}
</script>
使用步骤
从vue框架中导出ref函数
在setup函数中调用ref函数并传入数据(简单类型或者复杂类型)
在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
注意:在setup函数中使用ref结果,需要通过.value 访问,模板中使用不需要加.value
3.reactive函数
作用:reactive是一个函数,接收一个普通的对象传入,把对象数据转化为响应式对象并返回
<template>
<div>{{ state.name }}</div>
<div>{{ state.age }}</div>
<button @click="state.name = 'pink'">改值</button>
</template>
<script>
import { reactive } from 'vue'
export default {
setup () {
const state = reactive({
name: 'cp',
age: 18
})
return {
state
}
}
}
</script>
使用步骤
从vue框架中导入reactive函数
在setup函数中调用reactive函数并将对象数据传入
在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
注意:以上二者都可以返回响应式对象,需要注意的是当对象内部的字段名都明确了才可以使用reactive,否则使用ref
<template>
<div>{{ name }}</div>
<div>{{ age }}</div>
<button @click="name = 'pink'">改值</button>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
name: 'cp',
age: 18
})
return {
...state
}
}
}
</script>
4.computed计算属性
作用:对现有响应式数据做一定的计算处理得到新的数据
<template>
<!-- 计算属性 -->
<div>{{ageNum}}</div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
setup() {
let objExample = reactive({
name: "lily",
age: 18,
city: "山西",
study: "前端",
});
let ageNum=computed(()=>objExample.age+5)
return {
...toRefs(objExample),//使用toRefs不会破坏调用响应式特性,点击按钮依然可以改变值
ageNum,
}
}
}
</script>
5.ref的使用
实现步骤
- 使用ref函数传入null创建 ref对象 =>
const hRef = ref(null)
- 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 =>
<h1 ref="hRef"></h1>
- 使用 =>
hRef.value
ref + 普通dom标签 获取真实dom对象
-
<template> <h1 ref="h1Ref">我是普通dom标签</h1> </template> <script> import { onMounted, ref } from 'vue' export default { setup() { const h1Ref = ref(null) onMounted(() => { console.log(h1Ref.value) }) // 必须return return { h1Ref, } } } </script>
ref + 组件标签 获取组件实例对象
<template> <ref-comoonent ref="comRef"></ref-comoonent> </template> <script> import { onMounted, ref } from 'vue' import RefComoonent from '@/components/RefComponent' export default { components: { RefComoonent }, setup() { const comRef = ref(null) onMounted(() => { console.log(comRef.value) }) // 必须return return { comRef } } } </script>