Vue3入门01

ゝ一世哀愁。 2023-03-01 13:23 9阅读 0赞

# Vue3入门01 #

本文章通过简单案例来学习Vue3的组合API，了解Vue3的新特性以及使用方法，本文做个人学习用途，不参与商业用途。  
参考链接：https://composition-api.vuejs.org/zh/

## setup函数 ##

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

1.函数调用时机

`创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从Vue2.x的生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用`

beforeCreate() { 
        console.log('beforecreated')
      },
      created() { 
        console.log('created')
      },
      setup(props) { 
        console.log('setup')
      }

代码执行结果:  
![代码执行结果][20200726161250139.png]  
2. 模板中使用

`如果 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文：`

先来看看vue组件的代码

<template>
      <div>{ {  count }} { {  object.foo }}</div>
    </template>
    
    <script>
      import {  ref, reactive } from 'vue'
    
      export default { 
        setup() { 
          const count = ref(0)
          const object = reactive({  foo: 'bar' })
    
          // 暴露给模板
          return { 
            count,
            object,
          }
        },
      }
    </script>

对比之前Vue2的单文件组件写法，我们新用到了setup()作为入口函数，原先data里的数据声明变更为了，以ref，reactive声明出来的响应式变量暴露给模板的形式。

先来了解一下响应式系统API中的两个 reactive，ref。

reactive：  
`接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable();`  
`响应式转换是“深层的”：会影响对象内部所有嵌套的属性。基于 ES2015 的 Proxy 实现，返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象。`

ref:  
`接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。`

const count = ref(0)
    console.log(count.value) // 0
    
    count.value++
    console.log(count.value) // 1

`如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换。即传入对象时与使用reactive无异`

const object = ref({  foo: 'bar' })
        // 等同
        const object = reactive({  foo: 'bar' })

ref在模板中的使用：  
`当 ref 作为渲染上下文的属性返回（即在setup() 返回的对象中）并在模板中使用时，它会自动解套，无需在模板内额外书写 .value：`

ref作为响应式对象的属性访问：  
`当 ref 作为 reactive 对象的 property 被访问或修改时，也将自动解套 value 值，其行为类似普通属性：`

const count = ref(0)
    const state = reactive({ 
      count,
    })
    
    console.log(state.count) // 0
    
    state.count = 1
    console.log(count.value) // 1

`注意如果将一个新的 ref 分配给现有的 ref， 将替换旧的 ref：`

const otherCount = ref(2)
    
    state.count = otherCount
    console.log(state.count) // 2
    console.log(count.value) // 1

`注意当嵌套在 reactive Object 中时，ref 才会解套。从 Array 或者 Map 等原生集合类中访问 ref 时，不会自动解套(需要.value带出结果)：`

const arr = reactive([ref(0)])
    // 这里需要 .value
    console.log(arr[0].value)
    
    const map = reactive(new Map([['foo', ref(0)]]))
    // 这里需要 .value
    console.log(map.get('foo').value)

3.props传值

`setup函数接收 props 作为其第一个参数：`

props: { 
        msg: String,
      },
      setup(props) { 
        console.log('-------------' + props.msg)
        return { 
            
        }
      }

通过父组件传值

//父组件template中
    <MyFirstPage :msg="count1"></MyFirstPage>
    //父组件setup
      setup(props) { 
        const count1 = ref('count1')
        // 暴露给模板
        return { 
          count1
        }
      }

//子组件中可在模板直接使用
    <template>
        <div>
            <h1 class="title">标题：我创建的第一个页面</h1>
            { { msg}} 
        </div>
    </template>
    
    //子组件在setup函数也可以访问到
      setup(props) { 
        console.log(props.msg)
    
        return { 
            
        }
      }

`注意 props 对象是响应式的`  
`然而不要解构 props 对象，那样会使其失去响应性：`

[20200726161250139.png]: /images/20230208/db5ce6918fbb4c9889ccbdc455972901.png