vue3基础

http://huaxhe.gitee.io/vue3_study_docs/00_%E8%AF%BE%E7%A8%8B%E4%BB%8B%E7%BB%8D.html

https://vuepress.vuejs.org/zh/

计算属性get跟set

https://lurongtao.gitee.io/felixbooks-gp19-node.js/basics/01-Node.js%E5%9F%BA%E7%A1%80.html

setup

vue3所有的API组合都在这个函数中执行。

<template>
  <div>
    <div>{
   {
   aiqi}}</div>
    <button @click="aiqiF">+1</button>

    <div>{
   {
   obj.name}}</div>
    <div>{
   {
   obj.id}}</div>
    <button @click="change(1)">111111</button>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import {
    reactive, ref } from "vue";
export default {
   
  created(){
   
    console.log(this);
  },
  data(){
   
    return{
   
      ai:11111
    }
  },
  setup() {
   
    const aiqi = ref(123);
    const obj = reactive({
   
      name: "aiqi",
      id: 1,
    });
    function aiqiF() {
   
      aiqi.value = aiqi.value + 1;
    }
    console.log(obj);
    const change = (num:number) => {
   
      obj.name = 'zengyongfeng';
      obj.id = 24;
      console.log(num);
      
      return 1;
    };
    // function change():number{
   

    // }
    return {
   
      aiqi,
      obj,
      aiqiF,
      change,
    };
  },
};
</script>
<style>
</style>

reactive和ref

1.这两个都是让数据变成响应式数据
2.ref是通过给value添加getters和setters来实现对数据的劫持
3.reactive是通过proxy代理对象实现对对象数据劫持，通过Reflect操作对象属性的
4.ref如果传入为对象或数组数据会转换为proxy代理对象，
5.在js或ts中改变ref的值要通过value，而模板中则不需要

<template>
  <div>
    <div>{
   {
   aiqi}}</div>
    <button @click="aiqiF">+1</button>

    <div>{
   {
   obj.name}}</div>
    <div>{
   {
   obj.id}}</div>
    <button @click="change(1)">111111</button>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import {
    reactive, ref } from "vue";
export default {
   
  created(){
   
    console.log(this);
  },
  data(){
   
    return{
   
      ai:11111
    }
  },
  setup() {
   
    const aiqi = ref(123);
    const obj = reactive({
   
      name: "aiqi",
      id: 1,
    });
    function aiqiF() {
   
      aiqi.value = aiqi.value + 1;
    }
    console.log(obj);
    const change = (num:number) => {
   
      obj.name = 'zengyongfeng';
      obj.id = 24;
      console.log(num);
      
      return 1;
    };
    // function change():number{
   

    // }
    return {
   
      aiqi,
      obj,
      aiqiF,
      change,
    };
  },
};
</script>
<style>
</style>

computed、watch、watchEffect

1.computed

和vue一样

computed的set,是当计算属性值改变，才会触发

<template>
  <div>
    <div>{
   {
   aiqi}}</div>
    <div>{
   {
   ac}}</div>

    <button @click="caozuoac">caozuoac</button>
  </div>
</template>

<script lang="ts">
import {
    computed, reactive } from 'vue'
export default {
   
  setup(){
   
    const aiqi1 = re