Vue3.2-526互联

1.ref定义基本数据类型

<script setup>
  import {ref} from 'vue'   //需导入依赖
  let name = ref('zhangsan')
  const setName = () => {
    name.value = 'lisi'
  }
</script>

const orderDetail = ref({});

orderDetail js输出值为：RefImpl{...}

orderDetail.value输出值为：Proxy{}

html获取orderDetail属性值：orderDetail.属性名

Js获取orderDetail属性值（赋值也需.value）：orderDetail.value[‘属性名’]

2.reactive 定义引用数据类型

<script setup>
  import {reactive} from 'vue'  //需导入依赖
  let user = reactive({
    name: 'zhangsan',
    money: 1000
  })
  const setItem = () => {
    user.money = 1500   //相对ref无需使用.valu赋值与获取值
    user.gupiao = 100
  }
</script>

3.methods方法定义

const addMoney = () => {
   ...
}

4.computed计算属性

import {reactive, computed} from 'vue'  //需导入依赖
  let user = reactive({
    name: 'zhangsan',
    money: 1000
  })
  const nameString = computed(() => {
    return '我的名字是' + user.name
  })

5.watch使用

 watch(数据源, 执行函数, [配置参数])  

{immediate: true, deep: true}   //立即执行, 深度监听

监听基本数据类型单一数据源

import {ref, watch} from 'vue'   //需导入依赖
 let name = ref('zhnagsan')
 //直接监听属性
watch(name,(newVal,oldVal)=>{
    console.log('变量发生了改变...',newVal, oldVal);
})

监听引用数据类型单一数据源

 import {reactive, watch} from 'vue'
  let user = reactive({
    name: 'zhangsan',
    money: 1000
  })
  // 监听方法返回的属性
  watch(() => user.money, (newVal, oldVal) => {
    console.log('user money 变了: ', newVal, oldVal)
  })

监听引用数据类型多数据源[深度监听]

import {reactive, watch} from 'vue'
  let user = reactive({
    name: 'zhangsan',
    money: 1000,
    hobby: {
      study: '语文'
    }
  })
  // 深度监听 {deep:true}
  watch(() => user.hobby.study, (newVal, oldVal) => {
    console.log('user money 变了: ', newVal, oldVal)
  }, {deep:true})

生命周期

父传子 defineProps

const props = defineProps({
  name: {
    type: String,
    default: ""
  },
  like: {
    type: Array,
    default: () => []
  }
})

子传父 defineEmits

// 自定义事件
const emit = defineEmits(['send'])
// 事件执行函数
const sendData = () => {
  emit('send', '子组件的数据')
}

<Son @send="getData"/>

provide inject vue3 vue