关于前端:前端之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属性内