Vue3——学习

学习来源：
Vue组合式API
API手册

一、响应式状态与副作用

1.1 响应式状态

创建响应式的状态，需要引入reactive API : import {reactive} from ‘vue’;

<template>
  <div class="container">
    <div class="reactive">
      响应式data：{{state.msg}}    // 使用state下面的msg变量
    </div>
  </div>
</template>

<script lang="ts">
  import {reactive} from 'vue';	// 引入reactive实现响应式
  export default {
    setup(){		// 可以将变量、方法、生命周期等写入其中
      const state = reactive({
        msg:'Hello Vue3'
      });
      return{	// 将定义的变量、方法在return中发送出去
        state,
      }
    }
  }
</script>

1.2 watchEffect

在 Vue 中，响应式状态的基本用例就是在渲染时使用它。因为有了依赖追踪，视图会在响应式状态发生改变时自动更新。在 DOM 当中渲染内容会被视为一种“副作用”：程序会在外部修改其本身 (也就是这个 DOM) 的状态。我们可以使用 watchEffect API 应用基于响应式状态的副作用，并自动进行重应用。
watchEffect可以接受一个函数，会立即执行该函数，当其中的变量首次执行后会作为依赖被追踪，当之后这个变量进行变更时，这个函数就会重新执行。

<template>
  <div class="container">
    <div class="reactive" @click="changeMsg">  // 执行该方法，改变msg的值
      响应式data：{{state.msg}}
    </div>
  </div>
</template>

<script lang="ts">
  import {reactive,watchEffect} from 'vue';    // 引入watchEffect API，追踪数据变化
  export default {
    setup(){
      // 定义数据
      const state = reactive({
        msg:'Hello Vue3'
      });
      // 修改数据
      function changeMsg(){
        state.msg+=1
      }
      // 追踪变化
      watchEffect(()=>{
        console.log("什么时候应用",state.msg)   //当其中的state.msg变化时，watchEffect会被重新执行
      });
      return{
        state,
        changeMsg,
      }
    }
  }
</script>

1.3 watch与watchEffect区别

在Vue3中，也有与Vue2相同的watch，他与watchEffect的区别是：来源！！详细可以看他！！！！！！

• watchEffect不需要指定监听的属性，可以自动收集依赖，而watch需要指定被监听的属性
• watch有newVal和oldVal，可以看到前后的对比，而watchEffect无法进行对比，只能看到最新的值
• watchEffect在组件初始化的时候就会执行一次来进行依赖的收集，收集后的依赖发生变化后这个回调会再次执行，而watch不需要，因为其一开始就指定了要被检测的值。

二、计算状态与Ref

2.1 computed

computed计算属性，如果我有有一个依赖于其他状态而存在的状态，可以使用computed API 来创建一个计算值。

<template>
  <div class="container">
    <div class="reactive" @click="changeMsg">
      响应式data：{{state.msg}}
    </div>
    <button @click="changeCount">
      当前点击次数：{{state.count}}————
      点击次数乘2：{{state.doubleCount}}
    </button>
  </div>
</template>

<script lang="ts">
  import {reactive,watchEffect,computed} from 'vue';   		//  引入需要的API
  export default {
    setup(){
      // 定义数据
      const state = reactive({
        msg:'Hello Vue3',
        count:0,
        doubleCount:computed(()=>{				
          return state.count * 2
        })
      });
      function changeMsg(){
        state.msg+=1
      }
      function changeCount(){
        state.count++
      }
      // 自动进行重应用
      watchEffect(()=>{
        console.log(state.msg,state.count)
      });
      return{
        state,
        changeMsg,
        changeCount,
      }
    }
  }

2.2 使用ref

除了计算值的ref，我们可以使用ref API直接创建一个可变更的普通的ref
个人理解：
用reactive与ref定义的变量都是可以不断变化实现响应式的，
reactive可以直接state.count++ 进行值的变更
ref则要使用state.value.count++ .value很重要

<template>
  <div class="container" @click="increment">
    响应式data：{{state.count}}
  </div>
</template>

<script lang="ts">
  import {ref} from 'vue';	
  export default {
    setup() {
      const state = ref({
        count: 0
      });
      function increment() {
        state.value.count++
      }
      return {
        state,
        increment,
      }
    }
  }
</script>

三、生命周期钩子函数

我们知道在状态变化时可以使用 watchEffect 和 watch API 应用副作用。而为了在生命周期钩子中产生副作用，我们可以使用形如 onXXX 的 API (对应现有的生命周期选项)。
生命周期注册方法只能用在setup钩子中，它通过内部的全局状态自动找到调用此setup钩子的实例。

<template>
  <div class="container" @click="increment">
    响应式data：{{state.count}}
  </div>
</template>

<script lang="ts">
  import {ref,onUpdated} from 'vue';	// 使用声明周期先引入，引入名称为`on生命周期`
  export default {
    setup() {
      const state = ref({
        count: 0
      });
      onUpdated(()=>{						// 更新时调用
        console.log(state.value.count,"count值发生变化")
      });
      function increment() {
        state.value.count++
      }
      return {
        state,
        increment,
        onUpdated,			// 将生命周期返回出去
      }
    }
  }
</script>