1、组合式api
1.1 ref
-
通常定义基本类型或数组类型的变量或常量
-
例如:
import {ref} from 'vue'
let num = ref(10);
let str = ref('hello world')
let arr = ref([{ id: 1, name: 'jack' }, { id: 2, name: 'alice' }])
1.1.1 如何操作dom[通常vue很少操作dom] ----ref
- 给dom定义ref名称
<button ref="btn" @click="changeValue">修改值</button>
- 定义一个ref常量
js
//定义dom操作对象
const btn = ref(null)
- 然后通过常量.value.style.css属性名
btn.value.style.width='300px'
1.2、toRef
-
可以将reactive定义的响应式对象中的某个属性单独提取成ref定义的形式
-
例如:
const obj = reactive({
username: '张三',
age: 20,
address: '北京',
hobby: ['音乐', '刷抖音'],
})
const mingzi=toRef(obj,'username')
模板:
{{ mingzi }}
1.3 toRefs
-
可以将reactive定义的对象属性全部提取出来转换成ref形式
-
例如:
//定义用户信息,reactive主要用于复杂对象类型 const obj = reactive({ username: '张三', age: 20, address: '北京', hobby: ['音乐', '刷抖音'], }) //toRefs const {username,age,address,hobby}=toRefs(obj)
1.4 reactive
-
reactive主要用于复杂对象类型
-
例如:
//定义用户信息
const obj = reactive({
username: '张三',
age: 20,
address: '北京',
hobby: ['音乐', '刷抖音'],
})
1.5 computed
-
可以将ref,reative定义的变量或常量,通过计算属性生成一个新的可响应式的值(ref)
-
例如:
//计算属性
const total = computed(() => {
let res = 0;
arr.value.forEach(item => {
res+=item.num
})
return res
})
通常computed只能读取(默认支持get),不能修改,如果想修改,必须通过set方式
例如:
const fullname = computed({
get: () => {
return firstname.value+lastname.value
},
set: (val) => {
firstname.value = val[0]
lastname.value=val.slice(1)
}
1.6 watch
-
数据改变时,才监听数据的变化
-
例如:
//监听ref
//watch(监听目标,回调)
watch(firstname, (newV, oldV) => {
console.log('新值:',newV)
console.log('旧值:', oldV)
})
//监听reactive
watch(()=>obj.username, (newV,oldV) => {
console.log('obj.username新值:',newV)
console.log('obj.username旧值:', oldV)
})
1.7 watchEffect
-
进行页面立即触发监听
-
例如:
watchEffect(() => {
console.log('进入立马监听:',firstname.value)
})
1.8 nextTick
-
由于数据改变,dom并未更新,如果要拿到dom更新之后的结果,需要通过nextTick来解决
-
应用场景:
-
商品列表滚动
-
数据更新,要对dom做一些操作时使用
-
2、如何获取全局属性
vue2:
main.js将对象或属性添加到vue的原型上
Vue.prototpe.$http=axios
在组件上:this.$http
vue3中 类似于微信小程序的globalData或类似于vue2的$bus
1.在main.js添加全局自定义属性或方法
app.config.globalProperties.属性名或方法
例如:
app.config.globalProperties.$msg='我是全局的消息'
app.config.globalProperties.$http = function () {
console.log('我是全局的方法')
}
2.在组件中如何使用:
import {getCurrentInstance} from 'vuex'
const { proxy } = getCurrentInstance()
proxy.$http()
console.log(proxy.$msg)