Vue3自学笔记

创建项目

vue-cli：需要版本在4.5.0以上。

npm init vite@latest

setup

setup是所有组合API的“表演舞台”。
组件中用到的数据、方法等等，都要配置在setup中。也就是说不在需要单写data、methods、声明周期等等。

setup函数的两种返回值：
  1、若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点）

<template>
  <h1>App组件</h1>
  <p>姓名：{
  {name}}</p>
  <p>年龄：{
  {age}}</p>
  <button @click="sayHello">按钮</button>
</template>

<script>

export default {
     
  name: 'App',
  setup() {
     
    let name = "Tom";
    let age = 23;

    const sayHello = function() {
     
      alert(`我叫${
       name},今年${
       age}岁。`);
    };
    
	// 返回一个对象（常用）
    return {
     
      name,
      age,
      sayHello
    };
  }
}
</script>

  2、若返回一个渲染函数。（了解）
    h需要两个参数，第一个是元素类型，第二个是内容。
    如果返回一个渲染函数，无论模板中是什么，都只渲染渲染函数中的内容。

import {
    h } from '@vue/runtime-core';

export default {
   
  name: 'App',
  setup() {
   
    let name = "Tom";
    let age = 23;

    const sayHello = function() {
   
      alert(`我叫${
     name},今年${
     age}岁。`);
    };

    // 返回一个渲染函数
    return () => h('h1','哈哈哈哈')
  }
}

注意：

1. vue3尽量不要与vue2配置混用。
   vue2.x的配置（data、methods、computed…）中可以访问到setup的属性、方法。
   但是在setup中不能访问到vue2.x的配置（data、methods、computed…）
   如果有重名，setup优先。
2. setup不能是一个async函数。因为加入了async，返回值就不再是对象，而是promise，模板看不到return对象中的属性。

ref函数

我们写一个按钮，给按钮绑定一个点击事件，想要实现点击更新页面显示信息。

<template>
  <h1>App组件</h1>
  <p>姓名：{
  {name}}</p>
  <p>年龄：{
  {age}}</p>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
export default {
     
  name: 'App',
  setup() {
     
    let name = "Tom";
    let age = 23;

  function changeInfo() {
     
    name = "李四";
    age = 48;
  }

    return {
     
      name,
      age,
      changeInfo,
    };
  }
}
</script>

点击以后发现页面并没有发生改变，但是我们在changeInfo()中打印，会发现输出的name和age已经改变，但是由于vue没有检测到数据改变，所以没有渲染到页面上。
vue3有了一个新的ref函数：

import {
   ref} from 'vue';
export default {
   
  name: 'App',
  setup() {
   
    let name = ref("Tom");
    let age = ref(23);

这时候我们发现点击按钮页面还是没有变化，先不在changeInfo()里面修改数据，打印一下name，age：console.log(name.age);

发现被ref 绑定为响应式数据的name和age变成了对象。
需要加.value触发原型对象上的getter方法改变数据。

import {
   ref} from 'vue';
export default {
   
  name: 'App',
  setup() {
   
    let name = ref("Tom");
    let age = ref(23);

  function changeInfo() {
   
    name.value = "李四";
    age.value = 48;
    console.log(name, age);
  }

    return {
   
      name,
      age,
      changeInfo,
    };
  }
}

vue3的模板字符串不需要写.value，当模板解析到ref的时候，会自动加上.value，所以我们写的 <p>年龄：{ {age}}</p>被vue解析成了 <p>年龄：{ {age。value}}</p>

语法：cosnt xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象（ref对象）
• js中操作数据：xxx.value
• 模板中读取数据：不需要.value，直接 <p>{ {xxxx}}</p>

备注：

• 接受的数据可以是基本数据类型，也可以是对象类型。
• 基本数据类型：响应式数据依然是靠Object.defineProperty()的get和set完成的。
• 对象类型的数据：内部使用了Vue3.0的一个新函数——reactive函数。

reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

给上面用ref写的job对象，换成reactive，打印：

import {
   ref, reactive} from 'vue';
export default {
   
  name: 'App',
  setup() {
   
    let name = ref("Tom");
    let age = ref(23);
    let job = reactive({
   
      type: "门卫",
      salary: "0k",
    });

  function changeInfo() {
   
    name.value = "李四";
    age.value = 48;
    console.log(job);
  }

    return {
   
      name,
      age,
      job,
      changeInfo,
    };
  }
}

我们想要更改对象内的值，无需在.value:

  function changeInfo() {
   
  	=======================
    job.type = "保安";
    job.salary = "1k";
  }

上面的所有属性我们可以直接放在一个对象中，创建一个person变量来接收这个对象，使用reactive来使对象变为响应式。

import {
   reactive} from 'vue';
export default {
   
  name: 'App',
  setup() {
   
    // let name = ref("Tom");
    // let age = ref(23);
    // let job = reactive({
   
    //   type: "门卫",
    //   salary: "0k",
    //   a:{
   
    //     b:{
   
    //       c: 300
    //     }
    //   }
    // });
    // let hobby = ["1", "2", "3"];
    let person = reactive({
   
      name: "Tom",
      age: 18,
      job: {
   
        type: "门卫",
        salary: "0k",
        a: {
   
          b: {
   
            c: 300
          }
        },
        hobby: ["吃饭", "睡觉", "打豆豆"],
      }
    })

  function changeInfo() {
   
    // name.value = "李四";
    // age.value = 48;
    // job.type = "保安";
    // job.salary = "1k";
    // job.a.b.c = 10101010;
    // hobby[0] = 100;
    person.name = "李四";
    person.age = 22;
    person.job.type = "保安";
    person.job.salary = "1k";
    person.job.a.b.c = 1008711;
    person.job.hobby[2] = "烫头";
  }

    return