• Vue3中的setup和ref && reactive函数

    vue3常用composition API

    一、拉开序幕的setup

    1.setup是所有composition API 的平台，他是vue3的新的配置项，值为一个函数；

    2.组件中所用到的：数据，方法等等，全部配置到setup中。

    3.setup的两种返回值：

            (1)返回一个对象，其中的对象为本身定义的属性，方法，在模板中可以直接使用

         （2)返回一个渲染函数：则可以自定义渲染的内容

    4.vue2中的配置（data、methods、computed等）不要和setup一起使用；

    vue2中可以访问setup中的属性方法，但是setup不能访问vue2的配置属性、方法

    当属性、方法重名冲突时，setup优先；

    2.  
    3. <script>
    4. // import {h} from 'vue'
    5. export default {
    6.   name: 'App',
    7.   components: {
    8.   },
    9.   setup(){
    10.     /*数据*/
    11.     let name = '张三'
    12.     let age = 18
    13.     /* 方法*/
    14.     const say = () =>{
    15.       alert('我的名字叫' + name,`我今年${age}岁`)
    16.     }
    17.     //1.返回对象
    18.     return {
    19.       name,
    20.       age,
    21.       say
    22.     }
    23.     //2.渲染函数
    24.     // return () => h('h1','我是渲染函数')
    25.   }
    26. }
    27. script>

    二、main.js文件配置

    vue3引入的是createApp的工厂函数；

    1. /* vue3不在是引入vue构造函数，引入的是一个名为createApp的
    2. * 工厂函数
    3. *  */
    4. import { createApp } from 'vue'
    5. import App from './App.vue'
    6.  
    7. // createApp(App).mount('#app')
    8.  
    9. /* 创建应用实例对象--app（类似之前vue2的vm）*/
    10. const app = createApp(App)
    11. /* 挂载*/
    12. app.mount('#app')
    13.  
    14. /* unmount卸载挂载*/
    15. // setTimeout(()=>{
    16. //     app.unmount('#app')
    17. // },2000)

    三、ref函数

    作用：定义一个响应式的数据

    语法：const xxx = ref(数据)

            （1）创建一个包含响应式数据的引用对象（ref对象）

            （2）js中操作数据，使用 xxx.value 那到数据 

            （3）在模板中使用数据时，不需要 xxx.value，直接使用

    {{xxx}}

    注意：可以处理基本数据类型，也可以处理引用数据类型；

    2.  
    3. <script>
    4. /* 引入ref函数 ,实现响应式数据 */
    5. import {ref} from 'vue'
    6. export default {
    7.   name: 'App',
    8.   setup(){
    9.     /*数据*/
    10.     let name = ref('张三')
    11.     let age = ref(18)
    12.     let job = ref({
    13.       type:'前端工程师',
    14.       salary:30000
    15.     })
    16.     const changeInfo = ()=>{
    17.       name.value = '李四'
    18.       age.value = 25
    19.       job.value.type = 'UI设计师'
    20.       job.value.salary = '1000'
    21.       console.log(job.value)
    22.     }
    23.     //1.返回对象
    24.     return {
    25.       name,
    26.       age,
    27.       job,
    28.       changeInfo
    29.     }
    30.  
    31.   }
    32. }
    33. script>

    四、reactive函数

    （1）作用：定义一个对象类型（对象或者数组）的响应式数据（基本类型使用ref函数）

    （2）语法：const 代理对象 = reactive(源对象)，接收一个对象或者数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）

    （3）reactive定义的响应式数据是深层次的；

    （4）内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据

    五、vue2和vue3中响应式数据

    （1）vue2中对data数据操作响应式

    方法：vm.$set()，vm.delete()方法；或者数组的splice()方法