VUE3.0(一)：vue3.0简介

Composition api

使用选项式（option）API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

// 选项式 （option）API，
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },
  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件监听器绑定
  methods: {
    increment() {
      this.count++
    }
  },
  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

Composition api 组合api 就是把选项api组合起来方便管理、并且还能把某些功能单独剥离成一个文件来复用、组合api其实就是需要使用setup函数！
可以更加优雅的组织的代码，函数。让相关功能的代码更加有序的组织在一起，更加有逻辑性可读性
script setup 中的导入和顶层变量/函数都能够在模板中直接使用。

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

setup 函数

使用变量或者事件需要把名字 return 出去即可在模板中使用。

export default {
  setup() {
    let name = 'zhang'
    function at() {
      console.log(1)
    }
    return {
      name,
      at,
    }	
  },
}

使用变量或者事件需要把名字 return 出去即可在模板中使用。

// 若返回一个渲染函数：则可以自定义渲染内容
import { h } from 'vue'
export default {
  setup() {
    return () => h('h1', '你好')
  },
}

注意 vue3 虽然可以向下兼容 vue2，但是尽量不能混合使用。
配置（data、methos、computed…）中可以访问到 setup 中的属性、方法
但是由于 setup 中没有 this,所以 setup 中没办法读取配置中的数据和方法
如果有重名, setup 优先

setup 的注意点

数问题 setup 接收 2 个参数
setup 执行的时机是最早的，在 beforeCreate 之前执行，所以此时 this 是 undefined 参

// 在子组件中
export default {
  props: ['msg', 'school'],
  emits: ['hello'],
  setup(props, context) {
    // props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    // props接收props配置项中的相应式数据{msg:'',school:''}
    // context相当于上下文对象，里面有三个值attrs，slots，emit
 	//  attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 ```this.$attrs```。
	//  slots: 收到的插槽内容, 相当于 ```this.$slots```。
	// emit: 分发自定义事件的函数, 相当于 ```this.$emit```
    //方法
    function test() {
      // 调用父组件方法
      context.emit('hello', 666)
    }
    return {
      test,
    }
  },
}

秒客网

VUE3.0(一)：vue3.0简介

相关文章