Aplicação de VUE 3

API de composição combinada API

configuração

• parâmetro:

  adereços: Porque o adereços é responsivo, não desconstrutivo, se o desconstrutor perder responsivo, se necessário, o suporte de desconstrução, usando setupa função de toRefsrealiza isso

  import {
        
         toRefs } from 'vue'
  
  setup(props) {
        
        
  	const {
        
         title } = toRefs(props)
  
  	console.log(title.value)
  }
  

  contexto: é um objeto js comum, {attrs, slots, emit}, então pode ser desconstruído

  export default {
        
        
    setup(props, context) {
        
        
      // Attribute (有状态、非响应式对象，不要解构)
      console.log(context.attrs)
  
      // 插槽 (有状态、非响应式对象，不要解构)
      console.log(context.slots)
  
      // 触发事件 (方法)
      console.log(context.emit)
    }
  }
  

• Propriedades do componente de acesso

  Execução setup, a instância do componente não foi criada. Portanto, você só pode acessar as seguintes propriedades:

  • props
  • attrs
  • slots
  • emit

  Em outras palavras, você não poderá acessar as seguintes opções de componentes:

  • data
  • computed
  • methods

• Use em combinação com modelos

  O objeto retornado pode ser usado diretamente no modelo

• isso: não isso

reativo

Empacotando objetos comuns em responsivo

função ref

Gerar um objeto de variável ref responsiva => Criar uma referência responsiva , e ter um atributo de valor, o valor da variável é colocado no atributo de valor

// 生成
let name = ref('test')
// 在setup函数中返回该变量
// 模板中使用
{
    
    {
    
    name}}
// 修改变量值
name.value = 'world' // 注意一定是修改value属性

função toRefs

Gancho de ciclo de vida

Função de gancho usada na configuração

API de opções	Enganchar dentro setup
beforeCreate	Não é necessário*
created	Não é necessário*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

Assistir

import {
    
     ref, watch } from 'vue'
// 例子
const counter = ref(0)
watch(counter, (newValue, oldValue) => {
    
    
  console.log('The new counter value is: ' + counter.value)
})

// 语法
watch(一个响应式引用或者想要监听的getter，回调函数，配置选项)

computado

let cName = computed(_ => {
    
    
	return name.value+' computed'
})

Clique em mim, site oficial do VUE 3