初学vu3的小知识

一、组合式API（常用）

1.import { ref } from 'vue'
当ref的值发生改变时，视图层会自动更新。 
const name = ref('abc')
function btn() {
name.value = 'bcf'
}

2. import { reactive } from 'vue'
● 为值创建响应式引用
● 定义基本普通数据类型不能用reactive，用ref
● reactive主要定义复杂数据类型，如数组、对象
● 可相应深层次的数据，如多维数组
● reactive返回一个响应式的proxy对象
function btn() {
name = '234'
}

3. import { toRef } from 'vue'
响应式数据
ref的本质是复制粘贴一份数据，脱离了与原数据的交互
ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据，但是会更新视图层
toRef的本质是引用，与原数据有交互，修改响应式数据会影响到原数据，但不会更新视图层
toRef接受两个参数（要操作的对象、对象的某个属性）

4. import { toRefs } from 'vue'
用于批量设置多个数据为响应式数据
toRefs与原数据有交互，修改响应式数据会影响到原数据，但不会更新视图层
toRefs还可以与其他响应式数据交互，更加方便处理视图数据
<h1> {{ name }} </h1>
<h1> {{ age }} </h1>
setup() {
const obj = { name: '34434'， age: 18,  sex: '男'}
const newObject = reactive(obj)
return { ...torefs(newObject) }
}

5.computed,监听数据变化; import { computed } from 'vue'
<input type='number' v-model="age1"/>
<input type='number' v-model="age2"/>
总和:<input type='number' v-model="sum"/>

setup() {
const age1 = ‘ ’
const age2 = ' '
const res = reactive( { age1,  age2 })
const sum = computed( () =>{
return  age1 + age2
})
return { ...torefs(res), sum }
}

6.watch,监听数据变化; import { watch } from 'vue'
setup() {
const num1 = ref(0)
const num3 =  reactive( {
name :  '3424'，
age： { num： 1}
})
// 监听一个
watch( num1, ( newVal, oldVal ) = > {
console.log( newVal, oldVal )
})
// 监听多个
watch( [num1, num2], ( newVal, oldVal ) = > {
console.log( newVal, oldVal )
})
// 监听整个reactive响应数据变化，只能监听到最新的结果newVal=oldVal
watch( num3, ( newVal, oldVal ) = > {
console.log( newVal, oldVal )
})
// 监听reactive响应数据中某一个值的变化
watch( () => num3.age.num, ( newVal, oldVal ) = > {
console.log( newVal, oldVal )
}, { immediate: true } )  // { immediate: true } ,进入页面立即开启监听

return { num1，num3}
}

7.watchEffect,监听数据变化; import { watchEffect } from 'vue'
watchEffect如果存在的话，在组件初始化的时候就会执行一次收集依赖
 watchEffect拿不到新值和旧值
watchEffect不需要指定监听的属性，他会自动收集依赖，只要我们回调中引用到了响应式的属性
           那么当这些属性变更的时候，这个回调都会执行，而watch只能监听指定的属性而做出变更。
setup() {
const p1= ref(0)
const res = watchEffect( () => {
const a = p1.value
})
res() // 停止数据监听
}

8.shallowRef和shallowReactive
shallowRef只处理基本类型数据
shallowReactive只处理第一层数据，对象第一层数据
const p1 = shallowReactive({
name: '4234'，
age: {
num: 0
}
})

二、组件传值

1.普通页面传值

父：
setup() {
const p1 = reactive( { name: '234'，age: 18})
provide( 'name', p1)    //  传值
return { p1 }
}

子：
setup() {
const p1 = inject( 'name')  // 接收传值
  return { p1 }
}

2.点击给子组件传值
<button @click="btn">点击传值给父组件</button>
<helloWord ref="tableRef"/>

父组件：
setup() {
const  tableRef = ref()
const p1 = reactive( { name: '443'，age: 18})
function btn () {
tableRef.value.myChild( p1 )
}
return{ tableRef, p1, btn }
}

子组件：
setup（） {
function myChild(val) {}
return { myChild }
}

三、常用替换

import { getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance()
proxy.$emit('change-rows', this.tabList, this.isSelectAll)

声明使用
const emits = defineEmits(['saveFile'])
emits('saveFile')

2、频繁使用小知识
1、如果/deep/报错，可以使用::v-deep
2、@click.native 改为 @click.enter
3、el-dropdown-menu 的插槽使用已换成 <template #dropdown>
    @click.native改为 @click.enter
4、@keydown.enter.native改为@keydown.enter
5、在vue2.x中，我们想设置全局变量，可以在main文件中用prototype绑定vue实列，在vue3.0中，可以用            app.config.globalProperties来代替prototype
6、把slot-scope 改为v-slot

关于setup
在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：
defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的编译器宏。他们不需要导入且会随着 <script setup> 处理过程一同被编译掉。

getCurrentInstance()
1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。
2、使用：由vue提供，按需引入：import { getCurrentInstance} from 'vue';
import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();

// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
const { ctx }  = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy }  = getCurrentInstance();  //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
例如：
 ctx.$notify.success({ title: '成功', message: '导出成功' })


props（为组件的props），context（包含attrs；emit；slots三个组件的property）
setup(props,context){
}
1、扩展：父组件通过属性传的值在子组件中的各个部分的获取： ①：props：通过父传子的方式直接获取到值 ②：setup(props, context){} 方法中的props只能拿到选项props中已经定义的属性； ③：setup(props, { attrs, emit, slots}){} 方法中的attrs只能拿到未在选项props中定义的属性； ④：通过{ proxy } = getCurrentInstance(); proxy.attrs也只能拿到未在选项props中定义的属性；2、context：非响应式的对象；包含了组件暴露的三个property： context.attrs：传入组件中但是未被props接收的对象。 context.emit：用于触发当前组件实例上的传值事件。 context.slots：用来访问被插槽分发的内容（一般用于使用渲染函数来书写一个组件时）

2、Vue3.x中重写的v-model
用例：Vue3.x重写了v-model的实现方式，以适用用绑定多个v-model①：单个数据实现数据双向绑定
<my-components v-model="msg"></my-components>
// 等价于
<my-components :modelValue="msg" @update:modelValue="value=$event"></my-components>

// myComponents组件中接收绑定数据和触发数据改变
props: { modelValue: String }; // 获取数据
setup(props, { emit }) {
    emit('update:modelValue', 'newValue'); // 触发事件并传值
};

②：多个数据实现数据双向绑定
<my-components v-model:msg="msg" v-model:name="name"></my-components>
// 等价于
<my-components :msg="msg" @update:msg="value=$event" :name="name" @update:name="name=$event"></my-components>

// myComponents组件中接收绑定数据和触发数据改变
props: { msg: String, name: String }; // 获取数据
setup(props, { emit }) {
    emit('update:msg', 'newValue'); // 触发事件并传值
    emit('update:name', 'newValue'); // 触发事件并传值
};

3、使用echarts
按需引用，并且挂载方式和vue2（var myChart = this.$echarts.init(this.$refs['pieChart'])）有点差别，
不再使用this.$echarts,并且按需引入
<template>
  <div id="pieChart" style="width: 100%; height: 400px" />
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  courseData: { type: Array, default: () => [] },
  legendData: { type: Array, default: () => [] },
  courseTotal: { type: Number, default: 0 }
})

onMounted(() => {
  drawPie()
})
function drawPie() {
  var myChart = echarts.init(document.getElementById('pieChart'))
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    color: ['#3AA0FF', '#4DCB73', '#ee6f3d', '#FAAD14', '#42c7df'], // 饼图颜色
    legend: {
      orient: 'vertical',
      right: 40,
      bottom: 30,
      data: props.legendData
    },
    series: [
      {
        name: '总课程数', // 配置formatter时候会用到(就是{a})
        type: 'pie',
        radius: ['45%', '66%'], // 配置饼图和环图的内圆和外圆的大小
        center: ['40%', '50%'], // 配置图形的位置,前面一个是x轴,后面一个是y轴,'50%'代表是水平居中
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          fontSize: '16',
          fontWeight: 'bold',
          formatter: `{a}\n${props.courseTotal}`
        },
        data: props.courseData
      }
    ]
  }
  // 设置成功
  myChart.setOption(option)
  window.onresize = function () {
    myChart.resize()
  }
}
</script>

<style scoped>
</style>

4、引入Treeselect
import Treeselect from 'vue3-treeselect'
import 'vue3-treeselect/dist/vue3-treeselect.css'
不再是vue2中的（按照vue2引入会报错）
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
5、方法体拿到computed计算属性的值（.value）