前端之vue3的setup和setup的2个的形参、响应式页面

setup

setup是个函数, 包含数据、方法等，是组合api的“舞台”。
setup返回值：
1.对象，其中的属性、方法都可以在模板中直接使用
2.渲染含数（了解就好）

export default {
  name: "App",
  components: {},
  setup() {
  // 非响应式变量
    let name = "欧西里斯";
    let age = 18;
    function sayHello() {
      alert(`Hello,I'm ${name}`);
    }

    return {
      name,
      age,
      sayHello,
    };
  },
};

setup和data(), methods，vue3兼容vue2.

setup总结

async 修饰的函数返回值被Promise包裹住
async 与 await 配合

ref()函数 – 实现响应式

返回引用对象(ref对象), 可以动态渲染页面

let age = ref(18);
let obj = ref({
  type: "前端工程师",
  salary: "10k",
});

使用:
1.js中使用时用 对象.value 读取或修改数据

age.value = 14;
obj.value.type = "后端工程师", obj.value.salary = "10000k";

2.在模板中, 用插值语法, RefImpl对象可以自动读取value属性的值

// ref的参数是对象,type是参数对象的属性
  <h2>职业:{{ obj.type }}</h2>

// ref的参数不是对象
  <h2>年龄:{{ age }}</h2>

ref依旧可以作为唯一标识获取元素对象
返回值是一个对象

RefImpl
ref: reference
impl: implement

ref()小结

reactive函数处理对象(包括数组)

深层次响应,也就是说多次对象嵌套属性也会满足响应式
数组可以用索引改(响应式)

<template>
<!-- 4.渲染 -->
  <h1>个人信息</h1>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>职业:{{ person.obj.type }}</h2>
  <h2>工资:{{ person.obj.salary }}</h2>
  <h2>爱好:{{ person.hobby }}</h2>
  <button @click="sayHello">问好</button>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
// 1.引入
import { reactive } from "vue";
export default {
  name: "App",
  components: {},
  setup() {
    // 数据
    // 2.使用
    let person = reactive({
      name: "欧西里斯",
      age: 18,
      obj: {
        type: "前端工程师",
        salary: "10k",
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });
    // 方法
    // 3.修改
    function sayHello() {
      alert(`Hello,I'm ${person.name}`);
    }
    function changeInfo() {
      person.name = "李四";
      person.age = 14;
      // console.log(obj);
      (person.obj.type = "后端工程师"), (person.obj.salary = "10000k");
      // console.log(name, age);
      person.hobby[0] = "学习";
    }
    return {
      person,
      sayHello,
      changeInfo,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

reactive小结

vue2/3响应式原理

vue2存在问题, 提供的修改方式

vue3解决了以上问题

原因: reactive处理对象,变成响应式对象, 使用了ES6新属性proxy

window.proxy 浏览器内置构造函数

window.proxy修改源数据

vue3响应原理

es6新属性 Reflect 增(defineProperty)删(deleteProperty)改(set)查(get)
Reflect返回值
成功true
失败false

vue3响应原理总结

reactive与ref区别/使用

数据可以用data对象
data对象内有n个对象

setup的两个注意点 – 参数

setup只有两个参数

第一个props

用props接收,以参数形式放入setup内
setup内的props是Proxy代理对象形式

import { reactive } from "vue";
export default {
  name: "HelloWorld",
  // 1.接收
  props: ["msg"],
  // 2.参数1(Proxy对象形式)
  setup(props) {
  // 3.使用
    console.log("props:", props.msg);
    let person = reactive({
      name: "欧西里斯",
      hobby: ["抽烟", "喝酒", "烫头"],
    });

    return {
      person,
    };
  },
};

第二个context

（用props同级对象）emits接收父组件传递的事件

和props一样的用法, 但是不写也可以用
用emits接收父组件传递过来的自定义事件

emit触发事件

context.emit(‘事件’,参数)

$attrs

父组件传参, 子组件没接收, 数据存在子组件的$attrs属性内

$slots

父组件将html内容传递给子组件, 子组件没用slot(插槽)接收, 数据存在子组件的 $slots属性内