A sintaxe comumente usada no Vue3 é dividida em detalhes (dados responsivos, dados responsivos declarativos, eventos personalizados, propriedades computadas, ouvintes)

Language 2023-05-17 15:28:10 views: null

 

Índice

1. Crie uma instância Vue

1.1 Outras diferenças

 2. Dados reativos

2.1 Declarar dados responsivos

2.2 Eventos Personalizados

2.3 Propriedades computadas

2.4 Ouvintes

2.5 Ciclo de vida e sua aquisição de elementos Dom

3. Lista de APIs

A configuração 3.1 usa a entrada da API de composição

3.2 reativo

 3.3 ref e isRef

 3.4 aRefs

 3.5 relógio define o ouvinte

 3.5.1 monitoramento automático watchEffect

 3.5.2 Parar de ouvir

3.6 Função de efeito colateral

 3.7 propriedades computadas computadas

3.8 fornecer/injetar injeção de dependência

toRaw e markRaw

unRef, toRef, customRef

customRef: custom ref 

4. Componente de teletransporte

4.1 Suspense - um bom auxiliar para componentes assíncronos

5. Roteamento Vue-router

5.1 Criar uma rota

 5.2 Usando o roteamento

6.0 Unified State Management Vuex

6.1 Criar Vuex

6.2 Usando Vuex

 

1. Crie uma instância Vue

O Vue3 usa APIs em um estilo funcional, então diga adeus ao novo. 

// Vue3.0
import {createApp} from 'vue'
createApp(App).use(router).use(store).mount('#app')

// Vue2.0
import Vue from 'vue'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1.1 Outras diferenças

global 

// vue2
import Vue from 'vue'
Vue.component(...)
// vue3
import {createApp} from 'vue'
let app = createApp(App)
app.component(...)

 não filtre mais

global

Vue.component -> app.component
filter no filter -> calculado/método
v-model value+input -> value+input || modelValue+update: modelValue
function h render(h) -> import {h} from 'vue '
data data: {} || data(){} -> data(){}
componente assíncrono ()=>import('…') -> defineAsyncComponent(()=>import('…'))
evento emit, emit , emitir, ligar, ... -> $ emitir
outro...

 2. Dados reativos

personalização de modelo

<template>
  <div class="hello" style="border:1px solid">
    <h1 ref="root">{
   
   { msg }}</h1>
    {
   
   {state.count}} double is {
   
   {double}}
    <button @click="add">+</button>
  </div>
</template>

2.1 Declarar dados responsivos

// Vue2
export default {
  // ....
  data() {
    return {
      state: {
        count: 0
      }
    };
  },
}

// Vue3 reactive 
export default {
  // ....
  setup(){
    const state = reactive({
      count:0
    })
    return {state}
  }
}

2.2 Eventos Personalizados

// Vue2
export default {
  // ....
  methods: {
    add() {
      this.state.count++;
    }
  },
}

// Vue3
export default {
  // ....
  setup(){
    const add = () => {
      state.count++
    }
    return {add}
  }
}

2.3 Propriedades computadas

// Vue2
export default {
	// ...
  computed: {
    double() {
      return this.state.count * 2;
    }
  },
}
// Vue3
export default {
	// ...
  setup(){
    const double = computed (() => state.count * 2 )
    return {double}
  }
}

2.4 Ouvintes

// Vue2
export default {
	// ...
	watch: {
    count: value => {
      console.log("count is changed:", value);
    }
  }
}
// Vue3
export default {
	// ...
  setup(){
    watch(
      () => state.count,
      value => {
        console.log('state change :',value)
      }
    )
  }
}

2.5 Ciclo de vida e sua aquisição de elementos Dom

// Vue2
<div ref="dom"></div>
export default {
	// ...
	mounted() {
    this.$refs.dom.style.color = "red";
  }
}
// Vue3
<h1 ref="myRef">7777777777777777777</h1>
export default {
	// ...
  setup() {
    // ref 创建一个响应式的数据对象
    const myRef = ref(null);
    onMounted(() => {
      console.dir(myRef);
       const dom = myRef.value
      dom.style.color = 'red'
    });

    return {
      myRef
    }
  },
}

3. Lista de APIs

const {
  createApp,
  reactive, // 创建响应式数据对象
  ref, // 创建一个响应式的数据对象
  toRefs, // 将响应式数据对象转换为单一响应式对象
  isRef, // 判断某值是否是引用类型
  computed, // 创建计算属性
  watch, // 创建watch监听
  // 生命周期钩子
  onMounted,
  onUpdated,
  onUnmounted,
} = Vue

A configuração 3.1 usa a entrada da API de composição

A função de configuração será executada antes de criada após beforeCreate

setup(props,context){
    console.log('setup....',)
    console.log('props',props) // 组件参数
    console.log('context',context) // 上下文对象
}

3.2 reativo

A função reactive() aceita um objeto normal e retorna um objeto de dados reativo

const state = reactive({
        count: 0,
        plusOne: computed(() => state.count + 1)
    })

 3.3 ref e isRef

ref cria um objeto de dados responsivo com o valor fornecido (para ser preciso, o tipo de dados básico ini ou string).
isRef é, na verdade, para julgar se é um objeto de dados responsivo gerado por ref

 // 定义创建响应式数据
    const time = ref(new Date())
    // 设置定时器为了测试数据响应
    setInterval(() => time.value = new Date(), 1000)

    // 判断某值是否是响应式类型
    console.log('time is ref:', isRef(time))
    console.log('time', time)
    console.log('time.value', time.value)
    
    // 我们看看模板里面我们这样展示
    template: `
        <div>
            <div>Date is {
   
   { time }}</div>
        </div>
    `

 3.4 aRefs

toRefs é a operação em lote de ref

toRefs pode expandir os objetos criados por reativo em tipos básicos

// 如果不用toRefs
    const state = reactive({
        count: 0,
        plusOne: computed(() => state.count + 1)
    })
    return {
        state
    }
    // 模板渲染要这样写
    template: `
    <div>
        <div>count is {
   
   { state.count }} </div>
        <div>plusOne is {
   
   { state.plusOne }}</div>
    </div>
    `
    
    // 我们再看看用了toRefs
    const state = reactive({
        count: 0,
        plusOne: computed(() => state.count + 1)
    })
    return {
        ...toRefs(state)
    }
    // 模板渲染要这样写
    template: `
    <div>
        <div>count is {
   
   { count }} </div>
        <div>plusOne is {
   
   { plusOne }}</div>
    </div>
    `

 3.5 relógio define o ouvinte

Na verdade, isso não é novidade, você precisa especificar manualmente

watch(() => 谁,()=>{})
watch(() =>[a,b....], ()=>{})
watch(() => state.count * 2, val => {
        console.log(`count * 2 is ${val}`)
 })

 3.5.1 monitoramento automático watchEffect

Monitoramento automático, quando um determinado valor é usado dentro do watchEffect, ele monitorará automaticamente a alteração do valor e será acionado quando o valor for alterado 

 watchEffect((invalidate) => { 
  console.log('a变了',a)     
 })
invalidate: 参数是一个函数，放监听器失效的时候触发。监听器什么时候会失效？stop的时候、或者组件销毁
invalidate(()=>{})

 3.5.2 Parar de ouvir

 let stop = watchEffect((invalidate) => {})
 let stop1 = watch(() => 谁,()=>{})

 stop()
 stop1()

3.6 Função de efeito colateral

A modificação reativa do objeto acionará esta função 

    // 副作用函数
    effect(() => {
        console.log('数值被修改了..',state.count)
    })

 3.7 propriedades computadas computadas

const state = reactive({
    count: 0,
    plusOne: computed(() => state.count + 1)
})

3.8 fornecer/injetar injeção de dependência

// 外部组件
setup(){ 
  provide(名字，值【可以是任何类型】)  
}
// 内部
setup(){ 
  const a = inject(名字,可选参：默认值)

toRaw e markRaw

toRaw retira os dados mútuos brutos antes da conversão por métodos reativos, ref e somente leitura, e a operação nos dados brutos não será monitorada

markRaw mantém um dado que é sempre o dado original e não será monitorado 

unRef, toRef, customRef

unRef: Obtenha os dados brutos do objeto ref, então por que não usar toRaw

 toRaw é tomado junto com o valor, e o valor obtido é => {value:xxx}

unRef é específico de ref => xxx 

toRef: Também converte um dado em um objeto ref, mas ref tem algumas diferenças 

let json = {a:12}
const b = ref(json.a)
b.value++ 
console.log(json,b)  // {a:12} // {value:13}
const a = toRef(json,'a')
a.value++ 
console.log(json,a)  // {a:13} // {value:13}

ref toRef

É equivalente a copiar os dados originais, e ainda existe uma relação de referência entre as operações futuras, independentemente dos dados originais

Depois de alterar o objeto ref, o modelo será renderizado novamente e não acionará a renderização do modelo

customRef: custom ref 

function myCustomRef(){
  let _val = 12 
  return customRef((track,trigger)=>{
    return {
      get(){
        track()
        return _val
      },
      set(newVal){
        _val = newVal

        // 通知vue，请重新渲染
        trigger()
      }
    }
  })
}

setup(){
    const arr = myAjax('xxxx',[])
    return {
        arr
    }
}

function myAjax(url,initval){
  let _data = initval 
  return customRef((track,trigger)=>{
    axios(url).then(res=>{
      _data = res._data
      trigger()
    })
    return {
      get(){
        track()
        return _data
      },
      set(newVal){
        _data = newVal
        // 通知vue，请重新渲染
        trigger()
      }
    }
  })
}

Vue2 | Vue3
-------------------------------------------------- -
antes de criar | setup(替代)
criado | setup(替代)
beforeMount | onBeforeMount
montado | onMounted
beforeUpdate | onBeforeUpdate
atualizado | onUpdated
beforeDestroy | onBeforeUnmount
destruído | onUnmounted
errorCaptured | onErrorCaptured

4. Componente de teletransporte

Teleport fornece uma maneira limpa que nos permite controlar sob qual nó pai no DOM o HTML é renderizado 

// vue3 新添加了一个默认的组件就叫 Teleport，我们可以拿过来直接使用，它上面有一个 to 的属性，它接受一个css query selector 作为参数，这就是代表要把这个组件渲染到哪个 dom 元素中
  <teleport to="#modal">
    <div id="center">
      <h1>this is a modal</h1>
    </div>
  </teleport>

4.1 Suspense - um bom auxiliar para componentes assíncronos

Defina um componente assíncrono, retorne uma promessa na configuração, AsyncShow.vue

<template>
  <h1>{
   
   {result}}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return new Promise((resolve) => {
      setTimeout(() => {
        return resolve({
          result: 42
        })
      }, 3000)
    })
  }
})
</script>

Use async await para modificar a solicitação assíncrona e criar um novo componente DogShow.vue

<template>
  <img :src="result && result.message">
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
export default defineComponent({
  async setup() {
    const rawData = await axios.get('https://dog.ceo/api/breeds/image')
    return {
      result: rawData.data
    }
  }
})
</script>

<Suspense>
  <template #default>
    <async-show />
    <dog-show />
  </template>
  <template #fallback>
    <h1>Loading !...</h1>
  </template>
</Suspense>

5. Roteamento Vue-router

5.1 Criar uma rota

// Vue2
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:  [
  	// 路由配置不变
  ]
})

// Vue3
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes:  [
  	// 路由配置不变
  ]
})

 5.2 Usando o roteamento

// Vue2
export default {
  name: "Home",
  methods: {
    goHome() {
      this.$router.push('Home')
    }
  }
};

// Vue3
export default {
  setup() {
    const router = useRouter()
    const goHome = () => router.push('Home')
    return { goHome};
  }
};

6.0 Unified State Management Vuex

6.1 Criar Vuex

// Vue2
export default new Vuex.Store({
  state: {
    count:1
  },
  mutations: {
    inc(state){
      state.count ++ 
    }
  },
  actions: {
  },
  modules: {
  }
})

// Vue3
export default Vuex.createStore({
  state: {
    count:1
  },
  mutations: {
    add(state){
      state.count ++ 
    }
  },
  actions: {
  },
  modules: {
  }
});

6.2 Usando Vuex

// Vue2
export default {
  name: "Home",
  data() {
    return {
        state: this.$store.state
    };
  },
  computed: {
    double() {
      return this.$store.state.count * 2;
    },
  },
  methods: {
    add() {
      this.$store.commit("add");
    }
  }
};
// Vue3
import { computed,  reactive } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore()
    const state = store.state
    const double = computed(() => store.state.count * 2)

    const add = () => {
      store.commit("add");
    };
    return { state, add ,double};
  }
};

Supongo que te gusta

Origin blog.csdn.net/m0_67063430/article/details/129497711
Recomendado
Clasificación
Diario
Más
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)

Code World

© 2018 codetd.com