vue3.0使用总结

1、ref与reactive

• ref通常用于声明基础类型响应式数据。
• ref返回的是被包装过的响应式对象，在setup中访问和修改ref需要使用.value属性

• reactive用于声明复杂类型响应式数据。
• reactive返回的是被包装过的响应式对象，在setup中访问和修改直接使用属性即可
• List一般用ref，因为list赋值时，直接 ref.value=新值即可，而reactive需要一个一个往数组里添加-_-||

2、 关于uniapp中vue3使用uni.createSelectorQuery()时的this指向及查询结果说明

import { getCurrentInstance } from 'vue';
 
export default {
    setup(){
        const instance = getCurrentInstance(); // 获取组件实例
        
        // 获取微信小程序dom元素
        const getWXDom = () => {
            let query = uni.createSelectorQuery().in(instance);
            query.select('.drag_area').fields({ dataset: true, rect: true, id: true });
            query.exec(eles => {
                console.log(eles);
            })
        }
        // 批量获取微信小程序dom元素
        const getWXDoms = () =>{
            let query = uni.createSelectorQuery().in(instance);
            query.select('.drag_area').fields({ dataset: true, rect: true, id: true });
            query.selectAll('.drag_line').fields({ dataset: true, rect: true, id: true, size: true });
            // 批量获取dom元素时，结果是按照查询的顺序返回的
            query.exec(eles => {
                console.log(eles);
            })
        }
    }
}

 3、vue3.0中 defineEmits

<template>
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
  const emits = defineEmits(['increase']);
  const handelClick = () => {
    emits('increase');
  };
</script>