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')
  }

代码执行结果:

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 对象，那样会使其失去响应性：