reactive 组合式api声明-vite项目

2023-12-24 12:27:26

新增app.vue

<script>
  /**
   * reactive 组合式api:
   * - 用来声明响应式状态,
   * - 支持声明对象(对象,Map/Set集合)和数组类型,
   * - 不支持普通(原始)类型:string、boolean、number类型等
   */

  import {reactive } from 'vue';
  export default{//setup作为组合式api入口
    setup(){
      //不支持普通(原始)类型:string、boolean、number类型等
      //错误:const state = reactive(1);
      //错误:const state = reactive('hello');
      //错误:const state = reactive(true);
      //对象
      const state=reactive({
        id:1,
        name:'name'
      });
      //reactive()返回的是一个代理对象,不同之处在于,vue能跟踪对响应式对象属性的访问与更改操作
      console.log('state',state);
      state.name='9999';

      //原始对象和proxy对象是不相等的
      const obj={salary:90000}
      const states=reactive(obj)
      console.log("是否为同一对象", obj===states)
      //在一对象上调用reative 会返回相同对象,不会创建新的对象
      console.log('是否为同一对象',reactive(obj)===states)

      //声明方法,注意,return对象中要返回才可以使用
      function add(){
        //原始对象不是响应式对象,修改了原始对象模版中不会更新
        //obj.salary++;
        //console.log('obj.salary',obj.salary)
        states.salary++;
      }

      //数组
      const hobbies=reactive([
        '足球','篮球'
      ]);
      //使用return 将定义的数组和对象暴露给外面使用
      return {state,hobbies,add,states}
    }
    
  }
</script>

<template>
  <div>
    {{ state }} === {{ hobbies }}
    <p>工资:{{ states }}</p>
    <button @click="add">点击工资+1</button>
  </div>
</template>

<style scoped>

</style>

运行效果如下图:

点击点击工资+1按钮,工资加1

Ps:?

* reactive 组合式api:
* - 用来声明响应式状态,
* - 支持声明对象(对象,Map/Set集合)和数组类型,
* - 不支持普通(原始)类型:string、boolean、number类型等

* -原始对象不是响应式对象,修改了原始对象模版中不会更新,要修改proxy代理对象

文章来源:https://blog.csdn.net/QWERTY55555/article/details/135180088
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。