常用Composition API3.x

vue3 setup

理解: Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API(组合API)“表演的舞台”。
组件中所用到的:数据、方法等等，均要配置在setup中。4.setup函数的两种返回值:

1.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )

2.若返回一个渲染函数:则可以自定义渲染内容。(了解)

注意点:
尽量不要与Vue2.x配置混用

Vue2.x配置(data、methos、computed...）中可以访问到setup中的属性、方法。

但在setup中不能访问到Vue2.x配置(data、methos、computed...) 。

如果有重名, setup优先。

setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

测试

App.vue

<template>
    <h1>信息</h1>
    <h1>姓名{{name}}</h1>
    <h1>{{age}}</h1>
    <h1>{{sex}}</h1>
    <button @click="sayHai">sayHai</button>
    <br/>
    <button @click="sayHi">sayHi</button>
</template>
<script>

export default {
  name: 'App',
  //vue2方式
  data(){
    return{
       sex:"男"
    }
  },
  methods:{
     sayHi(){
       alert("vue2")
     }
  },

  //vue3方式
  //此处只是测试一下setup,暂时不考虑响应式问题
  setup(){
    //数据
    let name="张三"
    let age=18

    //方法
    function sayHai(){
      alert("我是"+name+"今年"+age+"岁了")
    }
    //返回一个对象（常用）
    return{
      name,
      age,
      sayHai
    }
    //返回一个渲染函数
   // return ()=> h("h1","yuan")
  }
}
</script>

vue3 ref函数

作用:定义—企响应式的数据

语法: const xxx = ref(initValue)

创建一个包含响应式数据的引用对象(reference对象)

JS中操作数据:xxx.value

模板中读取数据:不需要.value，直接:{{xxx}}

备注:

接收的数据可以是:基本类型、也可以是对象类型。

基本类型的数据:响应式依然是靠object.defineProperty()的get与set完成的

对象类型的数据:内部“求助”了Vue3.0中的一个新函数——reactive函数。

测试

App.vue

<template>
    <h1>信息</h1>
    <h1>姓名{{name}}</h1>
    <h1>{{age}}</h1>
    <h1>工作类型:{{job.type}}</h1>
    <h1>工作薪水:{{job.salary}}</h1>
    <button @click="geng()">更新数据</button>
</template>
<script>
 //引用ref
 import {ref} from "vue"
export default {
  name: 'App',
  setup(){
    //通过ref进行赋值
    //字符串类型
    let name=ref("张三")
    //数值类型
    let age=ref(18)
    //对象类型
    let job=ref({
      type:"前端工程师",
      salary:"100k"
    })

    //点击时更新数据
     function geng(){
       name.value="李四"
       age.value=20
       job.value.type="UI设计师"
       job.value.salary="200K"
     }
    //返回数据
    return{
      name,
      age,
      job,
      geng
    }
  }
}
</script>

vue3 reactive函数

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

语法: const 代理对象= reactive(源对象）接收一个对象（或数组)，返回一个代理对象(proxy对象)

reactive定义的响应式数据是“深层次的”。

内部基于ES6的 Proxy实现，通过代理对象操作源对象内部数据进行操作。

测试

App.vue

<template>
    <h1>信息</h1>
    <h1>姓名{{person.name}}</h1>
    <h1>{{person.age}}</h1>
    <h1>工作类型:{{person.job.type}}</h1>
    <h1>工作薪水:{{person.job.salary}}</h1>
    <h1>爱好:{{person.hobby}}</h1>
    <button @click="geng()">更新数据</button>
</template>
<script>
 //引用ref和reactive
 import {reactive} from "vue"
export default {
  name: 'App',
  setup(){
    //一个大的对象
    let person=reactive({
      name:"张三",
      age:18,
      //对象类型通过reactive进行赋值
      job:{
      type:"前端工程师",
      salary:"100k"
    },
    //数组类型通过reactive进行赋值
    hobby:["抽烟","喝酒","吃槟榔"]
    })
    //点击时更新数据
     function geng(){
       person.name="李四"
       person.age=20
       //通过reactive进行更新值
       person.job.type="UI设计师"
       person.job.salary="200K"
       //更新数组的值
       person.hobby[0]="学习"
     }
    return{
      person,
      geng
    }
  }
}
</script>