欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

讓你30分鐘快速掌握vue3教程

 更新時間：2020年10月26日 10:03:40   作者：撒點料兒  
這篇文章主要介紹了讓你30分鐘快速掌握vue3，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

經過了漫長的迭代，Vue 3.0終于在上2020-09-18發(fā)布了，帶了翻天覆地的變化，使用了Typescript 進行了大規(guī)模的重構，帶來了Composition API RFC版本，類似React Hook 一樣的寫Vue，可以自定義自己的hook ，讓使用者更加的靈活，接下來總結一下vue 3.0 帶來的部分新特性。

  • setup()
  • ref()
  • reactive()
  • isRef()
  • toRefs()
  • computed()
  • watch()
  • LifeCycle Hooks(新的生命周期)
  • Template refs
  • globalProperties
  • Suspense

Vue2與Vue3的對比

  • 對TypeScript支持不友好（所有屬性都放在了this對象上，難以推倒組件的數據類型）
  • 大量的API掛載在Vue對象的原型上，難以實現TreeShaking。
  • 架構層面對跨平臺dom渲染開發(fā)支持不友好
  • CompositionAPI。受ReactHook啟發(fā)
  • 更方便的支持了 jsx
  • Vue 3 的 Template 支持多個根標簽，Vue 2 不支持
  • 對虛擬DOM進行了重寫、對模板的編譯進行了優(yōu)化操作...

一、setup 函數

setup() 函數是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統(tǒng)一的入口, setup 函數會在 beforeCreate 之后、created 之前執(zhí)行, vue3也是取消了這兩個鉤子，統(tǒng)一用setup代替, 該函數相當于一個生命周期函數，vue中過去的data，methods，watch等全部都用對應的新增api寫在setup()函數中

setup(props, context) {
  context.attrs
  context.slots
  context.parent
  context.root
  context.emit
  context.refs
  
  return {
    
  }
 }
  • props: 用來接收 props 數據
  • context 用來定義上下文, 上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到, 在 setup() 函數中無法訪問到 this，是個 undefined
  • 返回值: return {}, 返回響應式數據, 模版中需要使用的函數

二、reactive 函數

reactive() 函數接收一個普通對象，返回一個響應式的數據對象, 想要使用創(chuàng)建的響應式數據也很簡單，創(chuàng)建出來之后，在setup中return出去，直接在template中調用即可

<template>
 {{name}} // test
<template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
 setup(props, context) {
 
  let state = reactive({
   name: 'test'
  });
  
  return state
 }
});
</script>

三、ref() 函數

ref() 函數用來根據給定的值創(chuàng)建一個響應式的數據對象，ref() 函數調用的返回值是一個對象，這個對象上只包含一個 value 屬性, 只在setup函數內部訪問ref函數需要加.value

<template>
  <div class="mine">
    {{count}} // 10
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
 setup() {
  const count = ref<number>(10)
  // 在js 中獲取ref 中定義的值, 需要通過value屬性
  console.log(count.value);
  return {
    count
  }
  }
});
</script>

在 reactive 對象中訪問 ref 創(chuàng)建的響應式數據

<template>
  <div class="mine">
    {{count}} -{{t}} // 10 -100
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
 setup() {
  const count = ref<number>(10)
  const obj = reactive({
   t: 100,
   count
  })
  // 通過reactive 來獲取ref 的值時,不需要使用.value屬性
  console.log(obj.count);
  return {
    ...toRefs(obj)
  }
  }
});
</script>

四、isRef() 函數

isRef() 用來判斷某個值是否為 ref() 創(chuàng)建出來的對象

<script lang="ts">
import { defineComponent, isRef, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const name: string = 'vue'
  const age = ref<number>(18)
  console.log(isRef(age)); // true
  console.log(isRef(name)); // false

  return {
   age,
   name
  }
 }
});
</script>

五、toRefs() 函數

toRefs() 函數可以將 reactive() 創(chuàng)建出來的響應式對象，轉換為普通的對象，只不過，這個對象上的每個屬性節(jié)點，都是 ref() 類型的響應式數據

<template>
 <div class="mine">
  {{name}} // test
  {{age}} // 18
 </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
 setup(props, context) {
  let state = reactive({
   name: 'test'
  });

  const age = ref(18)
  
  return {
   ...toRefs(state),
   age
  }
 }
});
</script>

六、computed()

該函數用來創(chuàng)造計算屬性，和過去一樣，它返回的值是一個ref對象。 里面可以傳方法，或者一個對象，對象中包含set()、get()方法

6.1 創(chuàng)建只讀的計算屬性

import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const age = ref(18)

  // 根據 age 的值，創(chuàng)建一個響應式的計算屬性 readOnlyAge,它會根據依賴的 ref 自動計算并返回一個新的 ref
  const readOnlyAge = computed(() => age.value++) // 19

  return {
   age,
   readOnlyAge
  }
 }
});
</script>

6.2 通過set()、get()方法創(chuàng)建一個可讀可寫的計算屬性

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const age = ref<number>(18)

  const computedAge = computed({
   get: () => age.value + 1,
   set: value => age.value + value
  })
  // 為計算屬性賦值的操作，會觸發(fā) set 函數, 觸發(fā) set 函數后，age 的值會被更新
  age.value = 100
  return {
   age,
   computedAge
  }
 }
});
</script>

七、 watch() 函數

watch 函數用來偵聽特定的數據源，并在回調函數中執(zhí)行副作用。默認情況是懶執(zhí)行的，也就是說僅在偵聽的源數據變更時才執(zhí)行回調。

7.1 監(jiān)聽用reactive聲明的數據源

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const state = reactive<Person>({ name: 'vue', age: 10 })

  watch(
   () => state.age,
   (age, preAge) => {
    console.log(age); // 100
    console.log(preAge); // 10
   }
  )
  // 修改age 時會觸發(fā)watch 的回調, 打印變更前后的值
  state.age = 100
  return {
   ...toRefs(state)
  }
 }
});
</script>

7.2 監(jiān)聽用ref聲明的數據源

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const age = ref<number>(10);

  watch(age, () => console.log(age.value)); // 100
  
  // 修改age 時會觸發(fā)watch 的回調, 打印變更后的值
  age.value = 100
  return {
   age
  }
 }
});
</script>

7.3 同時監(jiān)聽多個值

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const state = reactive<Person>({ name: 'vue', age: 10 })

  watch(
   [() => state.age, () => state.name],
   ([newName, newAge], [oldName, oldAge]) => {
    console.log(newName);
    console.log(newAge);

    console.log(oldName);
    console.log(oldAge);
   }
  )
  // 修改age 時會觸發(fā)watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調
  state.age = 100
  state.name = 'vue3'
  return {
   ...toRefs(state)
  }
 }
});
</script>

7.4 stop 停止監(jiān)聽

在 setup() 函數內創(chuàng)建的 watch 監(jiān)視，會在當前組件被銷毀的時候自動停止。如果想要明確地停止某個監(jiān)視，可以調用 watch() 函數的返回值即可，語法如下：

<script lang="ts">
import { set } from 'lodash';
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const state = reactive<Person>({ name: 'vue', age: 10 })

  const stop = watch(
   [() => state.age, () => state.name],
   ([newName, newAge], [oldName, oldAge]) => {
    console.log(newName);
    console.log(newAge);

    console.log(oldName);
    console.log(oldAge);
   }
  )
  // 修改age 時會觸發(fā)watch 的回調, 打印變更前后的值, 此時需要注意, 更改其中一個值, 都會執(zhí)行watch的回調
  state.age = 100
  state.name = 'vue3'

  setTimeout(()=> { 
   stop()
   // 此時修改時, 不會觸發(fā)watch 回調
   state.age = 1000
   state.name = 'vue3-'
  }, 1000) // 1秒之后講取消watch的監(jiān)聽
  
  return {
   ...toRefs(state)
  }
 }
});
</script>

八、LifeCycle Hooks(新的生命后期)

新版的生命周期函數，可以按需導入到組件中，且只能在 setup() 函數中使用, 但是也可以在setup 外定義, 在 setup 中使用

<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from 'vue';
export default defineComponent({
 setup(props, context) {
  onBeforeMount(()=> {
   console.log('beformounted!')
  })
  onMounted(() => {
   console.log('mounted!')
  })

  onBeforeUpdate(()=> {
   console.log('beforupdated!')
  })
  onUpdated(() => {
   console.log('updated!')
  })

  onBeforeUnmount(()=> {
   console.log('beforunmounted!')
  })
  onUnmounted(() => {
   console.log('unmounted!')
  })

  onErrorCaptured(()=> {
   console.log('errorCaptured!')
  })

  return {}
 }
});
</script>

九、Template refs

通過refs 來回去真實dom元素, 這個和react 的用法一樣,為了獲得對模板內元素或組件實例的引用，我們可以像往常一樣在setup()中聲明一個ref并返回它

  • 還是跟往常一樣，在 html 中寫入 ref 的名稱
  • 在steup 中定義一個 ref
  • steup 中返回 ref的實例
  • onMounted 中可以得到 ref的RefImpl的對象, 通過.value 獲取真實dom
<template>
 <!--第一步：還是跟往常一樣，在 html 中寫入 ref 的名稱-->
 <div class="mine" ref="elmRefs">
  <span>1111</span>
 </div>
</template>

<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  // 獲取真實dom
  const elmRefs = ref<null | HTMLElement>(null);
  onMounted (() => {
   console.log(elmRefs.value); // 得到一個 RefImpl 的對象, 通過 .value 訪問到數據
  })

  return {
   elmRefs
  }
 }
});
</script>

十、vue 的全局配置

通過vue 實例上config來配置,包含Vue應用程序全局配置的對象。您可以在掛載應用程序之前修改下面列出的屬性:

const app = Vue.createApp({})

app.config = {...}

為組件渲染功能和觀察程序期間的未捕獲錯誤分配處理程序。錯誤和應用程序實例將調用處理程序

app.config.errorHandler = (err, vm, info) => {}

可以在應用程序內的任何組件實例中訪問的全局屬性，組件的屬性將具有優(yōu)先權。這可以代替Vue 2.xVue.prototype擴展：

const app = Vue.createApp({})

app.config.globalProperties.$http = 'xxxxxxxxs'

可以在組件用通過 getCurrentInstance() 來獲取全局globalProperties 中配置的信息,getCurrentInstance 方法獲取當前組件的實例，然后通過 ctx 屬性獲得當前上下文，這樣我們就能在setup中使用router和vuex, 通過這個屬性我們就可以操作變量、全局屬性、組件屬性等等

setup( ) {
 const { ctx } = getCurrentInstance();
 ctx.$http  
}

十一、Suspense 組件

在開始介紹 Vue 的 Suspense 組件之前，我們有必要先了解一下 React 的 Suspense 組件，因為他們的功能類似。

React.lazy 接受一個函數，這個函數需要動態(tài)調用 import()。它必須返回一個 Promise，該 Promise 需要 resolve 一個 default export 的 React 組件。

import React, { Suspense } from 'react';
 
 
const myComponent = React.lazy(() => import('./Component'));
 
 
function MyComponent() {
 return (
  <div>
   <Suspense fallback={<div>Loading...</div>}>
    <myComponent />
   </Suspense>
  </div>
 );
}

Vue3 也新增了 React.lazy 類似功能的 defineAsyncComponent 函數，處理動態(tài)引入（的組件）。defineAsyncComponent可以接受返回承諾的工廠函數。當您從服務器檢索到組件定義時，應該調用Promise的解析回調。您還可以調用reject(reason)來指示負載已經失敗

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
 import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)

Vue3 也新增了 Suspense 組件:

<template>
 <Suspense>
  <template #default>
   <my-component />
  </template>
  <template #fallback>
   Loading ...
  </template>
 </Suspense>
</template>

<script lang='ts'>
 import { defineComponent, defineAsyncComponent } from "vue";
 const MyComponent = defineAsyncComponent(() => import('./Component'));

export default defineComponent({
  components: {
   MyComponent
  },
  setup() {
   return {}
  }
})

</script>

十二、vue 3.x 完整組件模版結構

一個完成的vue 3.x 完整組件模版結構包含了:組件名稱、 props、components、setup(hooks、computed、watch、methods 等)

<template>
 <div class="mine" ref="elmRefs">
  <span>{{name}}</span>
  <br>
  <span>{{count}}</span>
  <div>
   <button @click="handleClick">測試按鈕</button>
  </div>

  <ul>
   <li v-for="item in list" :key="item.id">{{item.name}}</li>
  </ul>
 </div>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue';

interface IState {
 count: 0,
 name: string,
 list: Array<object>
}

export default defineComponent({
 name: 'demo',
 // 父組件傳子組件參數
 props: {
  name: {
   type: String as PropType<null | ''>,
   default: 'vue3.x'
  },
  list: {
   type: Array as PropType<object[]>,
   default: () => []
  }
 },
 components: {
  /// TODO 組件注冊
 },
 emits: ["emits-name"], // 為了提示作用
 setup (props, context) {
  console.log(props.name)
  console.log(props.list)
  
  
  const state = reactive<IState>({
   name: 'vue 3.0 組件',
   count: 0,
   list: [
    {
     name: 'vue',
     id: 1
    },
    {
     name: 'vuex',
     id: 2
    }
   ]
  })

  const a = computed(() => state.name)

  onMounted(() => {

  })

  function handleClick () {
   state.count ++
   // 調用父組件的方法
   context.emit('emits-name', state.count)
  }
 
  return {
   ...toRefs(state),
   handleClick
  }
 }
});
</script>

vue 3 的生態(tài)

UI 組件庫

vant2.x

Ant Design of Vue 2.x

element-plus

到此這篇關于讓你30分鐘快速掌握vue3教程的文章就介紹到這了,更多相關vue3 入門內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • Vue?組件上的v-model雙向綁定原理解析

    Vue?組件上的v-model雙向綁定原理解析

    這篇文章主要介紹了Vue?組件上的v-model雙向綁定原理,從本文的學習可以知道組件上v-model指令的本質也是生成了value屬性和input事件，具體實例代碼跟隨小編一起看看吧
    2022-05-05
  • vue @input和@click的區(qū)別及說明

    vue @input和@click的區(qū)別及說明

    這篇文章主要介紹了vue @input和@click的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vue3在構建時使用魔法糖語法時defineProps和defineEmits的注意事項小結

    vue3在構建時使用魔法糖語法時defineProps和defineEmits的注意事項小結

    在 Vue 3.2+ 版本中,可以使用 <script setup> 替代傳統(tǒng)的 script標簽來編寫組件,它提供了更簡潔的語法來編寫 Composition API 代碼,這篇文章主要介紹了vue3在構建時使用魔法糖語法時defineProps和defineEmits的注意事項小結,需要的朋友可以參考下
    2024-04-04
  • vue+Element-ui前端實現分頁效果

    vue+Element-ui前端實現分頁效果

    這篇文章主要為大家詳細介紹了vue+Element-ui前端實現分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • vue中v-text / v-html使用實例代碼詳解

    vue中v-text / v-html使用實例代碼詳解

    這篇文章主要介紹了vue中v-text / v-html使用實例代碼詳解,非常不錯，代碼簡單易懂，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-04-04
  • webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟

    webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟

    這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下
    2023-11-11
  • vue項目中axios使用詳解

    vue項目中axios使用詳解

    這篇文章主要介紹了vue項目中axios使用方法以及原理介紹，如果你正巧學習這個知識點，那么參考下吧。
    2018-02-02
  • Vue中JSON文件神奇應用fetch、axios異步加載與模塊導入全指南詳細教程

    Vue中JSON文件神奇應用fetch、axios異步加載與模塊導入全指南詳細教程

    在Vue中使用JSON文件有多種方式,包括使用fetch方法加載JSON文件、使用axios庫加載JSON文件,以及將JSON文件導入為模塊,這篇文章主要介紹了Vue中JSON文件神奇應用fetch、axios異步加載與模塊導入全指南詳細教程,需要的朋友可以參考下
    2024-01-01
  • Vue3 openlayers加載瓦片地圖并手動標記坐標點功能

    Vue3 openlayers加載瓦片地圖并手動標記坐標點功能

    這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動標記坐標點功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2024-04-04
  • Vue配置環(huán)境變量的正確打開方式

    Vue配置環(huán)境變量的正確打開方式

    這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-01-01

最新評論