vue3学习笔记

vue3基础语法

export default{
  setup{
    return{}
  }
}

2 响应式基础类型数据 ref，主要用于字符串，数字，布尔，使用需要引入

import  {ref} from 'vue'


const  name = ref('zhangsan')

3 响应式复杂类型数据 reactive，主要用于数组，对象，多维数组,使用需要引入（基本类型是不能使用该引用）

import  {reactive} from 'vue'

const  name = reactive({'name':'zhangsan'})

4 toRef:也是可以创建一个响应式数据，本质是拷贝粘贴一份数据，脱离了原数据的交互。
ref 函数是将对象中的属性变成响应式数据，修改响应式数据不会影响到原数据，但是会更新视图层
toRef的本质是引用，与源数据有交互，修改响应式数据会影响到原数据，但是不会更新视图层

5 toRefs：用于批量设置多个数据为响应式数据。与源数据有交互，修改响应式数据会影响到原数据，但是不会更新视图层

6 计算属性 computed

const res = computed(()=>{
  return  "string"
  })

7 监听 watch

const count = ref(0);

watch(count,(newValue,oldValue)=>{
    console.log();
  })

const res = reactive({name:'berger',age:18})

watch(()=>res.name,(newValue,oldValue)=>{
    console.log();
  })

8 传值（自动传值）
父传子组件：

父组件--provide

const res = reactive({name:'berger',age:18})

provide('key',res)

子组件--inject 自动传值

const res = inject('key')

8 传值（点击传值）

父组件

<template>
// 子组件
  <son_zujian  ref="val">
</template>
<script>

setup(){
   const val = ref()
   const res = reactive({name:'berger',age:18})

   function btn(){
      val.value.getValue(res );   // getValue 子组件定义的方法
   }  

  return {val,btn}
}
</script>

子组件--

<script>

setup(){
    function getValue(val){
        //业务逻辑
console.log(val)
  }
}
</script>

9 vuex

npm install vuex@next   --save


//引入
import  {userStore} from  'vuex'

10 生命周期函数
onBeforeMount -- 在挂载开始之前被调用
onMounted -- 组件挂载时被调用
onBeforeUpdate -- 数据更新是调用
onUpdate --数据更改导致的虚拟dom重新渲染在这之后会调用该钩子
onBeforeUnmount --在卸载组件实例之前调用
onUnmount --卸载组件实例后调用
onErrorCaptured --当捕获到一个来自子孙组件错误是被调用

vue应用程序4个主要时间

1 创建-在组件创建是执行
2 挂载-dom被挂载时执行
3 更新-当相应数据被修改是执行
4 销毁-在元素被销毁钱执行