vue3核心语法

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)