reactive 组合式api声明-vite项目

新增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代理对象