Vue3.0系列——「vue3.0學習手冊」第一期

1、項目搭建

vite是尤大大開發的一款意圖取代webpack的工具。其實現原理是利用ES6的import發送請求加載文件的特性。攔截這些請求，作一些編譯，省去webpack冗長的打包時間。並將其與Rollup捆綁在一塊兒用於生產。 在開發過程當中沒有捆綁。源代碼中的ES Import語法直接提供給瀏覽器，瀏覽器經過本機<script module>支持對其進行解析，從而爲每次導入發出HTTP請求。開發服務器攔截請求，並在必要時執行代碼轉換。例如，對*.vue文件的導入會在發送回瀏覽器以前即時進行編譯。

一、全局安裝vite腳手架

npm install -g create-vite-app
複製代碼

二、使用腳手架建立項目

create-vite-app projectName
複製代碼

三、進入項目文件夾

cd projectName
複製代碼

四、安裝依賴

npm install
複製代碼

五、啓動vue3.0項目

npm run dev
複製代碼

2、vue2.x存在的問題

2.x中的一點問題是當業務不斷增多時，數據跟邏輯分散，會很難維護。

<template>
  <div>
    <div>
      <input type="text" v-model="obj.id">
      <input type="text" v-model="obj.con">
      <button @click="submit">提 交</button>
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="cli(index)">
        {{item.id}}-{{item.con}}
      </li>
    </ul>
  </div>
</template>

<script> export default { name:"filterBox", data(){ return { list:[ { id:1, con:"a" }, { id:2, con:"b" } ], obj:{ id:"", con:"" } // 代碼數據1 // 代碼數據2 // ... } }, methods:{ cli(index){ this.list = this.list.filter((item,idx)=>idx!==index); console.log(this.list); }, submit(){ // const obj = Object.assign({},this.obj); this.list.push(this.obj); this.obj.id = ""; this.obj.con = ""; }, // 執行代碼代碼邏輯3 // ... }, computed:{ // 執行代碼代碼邏輯1 }, watch:{ // 執行代碼邏輯2 } } </script>

<style>

</style>
複製代碼

3、組合API

ref

<template>
  <div>
    <p>{{count}}</p>
    <button @click="add">add</button>
  </div>
</template>

<script> import {ref} from "vue" export default { name: 'App', setup(){ // 定義一個名稱叫作count變量，這個變量的初始值是0 // 這個變量發生該改變以後，vue會自動更新頁面。 const count = ref(0); // 在組合API中，若是想定義方法，不用定義到methods中，直接在setup函數中定義便可。 const add = () => { count.value+=1; } // 在組合API中定義的變量/方法，要想在外界使用，必須return出去。 return { count, add } } } </script>

複製代碼

ref只能監聽簡單類型的變化，不能監聽複雜類型的變化（對象/數組）。 它的本質是reactive，當咱們給ref函數傳遞一個值時，ref函數會自動將ref轉換成reactive。

ref(0) -->  reactive({
value:0
})
複製代碼

另外，須要注意的是，若是是經過ref建立出來的數據，那麼在template中使用的時候不用經過.value來獲取。由於Vue會自動給咱們添加.value 。

那麼vue是如何決定是否須要自動添加.value的。vue在解析數據以前，會自動判斷這個數據是不是ref類型的，若是是就自動添加.value，若是不是就不自動添加.value。

vue是如何判斷當前的數據是不是ref類型的？ 經過當前數據的__v_ref來判斷的，若是有這個私有的屬性，而且取值爲true，那麼就表明是一個ref類型的數據。

那麼咱們開發者也有本身api來判斷。isRef(數據)，返回true或者是false。

import {isRef} from 'vue'
複製代碼

reactive

reactive 能夠監聽複雜類型的變化，如對象或者數組。

let state = reactive({
	name:"maomin"
});
// 或
let arr = reactive([1,2,3]);
複製代碼

<template>
  <div>
    <ul>
      <li v-for="(item,index) in state.list" :key="item.id" @click="removeItem(index)">{{item.id}}--{{item.con}}</li>
    </ul>
  </div>
</template>

<script> import {reactive} from "vue" export default { name: 'App', setup(){ const state = reactive({ list:[ { id:1, con:"A" }, { id:2, con:"B" }, { id:3, con:"C" } ] }); const removeItem = (index) => { state.list = state.list.filter((item,i)=>i!==index) } return { state, removeItem } } } </script>

複製代碼

咱們能夠改變下，把數據跟邏輯放在一塊，這樣就解決了vue2.x的數據跟邏輯分散的問題。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in state.list" :key="item.id" @click="removeItem(index)" >
        {{ item.id }}--{{ item.con }}
      </li>
    </ul>
  </div>
</template>

<script> import { reactive } from "vue"; export default { name: "App", setup() { let {state,removeItem} = userReturn(); return { state, removeItem, }; }, }; function userReturn(params) { const state = reactive({ list: [ { id: 1, con: "A", }, { id: 2, con: "B", }, { id: 3, con: "C", }, ], }); const removeItem = (index) => { state.list = state.list.filter((item, i) => i !== index); }; return {state,removeItem} } </script>

複製代碼

咱們實現了上面的刪除功能，那咱們在實現一個添加的功能。

<template>
  <div>
    <input type="text" v-model="state2.items.id">
    <input type="text" v-model="state2.items.con">
    <button @click="addItem">添加</button>
    <ul>
      <li v-for="(item, index) in state.list" :key="item.id" @click="removeItem(index)" >
        {{ item.id }}--{{ item.con }}
      </li>
    </ul>
  </div>
</template>

<script> import { reactive } from "vue"; export default { name: "App", setup() { let {state,removeItem} = userRemove(); let {state2,addItem} = userAdd(state); return { state, removeItem, state2, addItem }; }, }; // 添加 function userAdd(state) { const state2 = reactive({ items:{ id:"", con:"" } }); const addItem = () => { const items = Object.assign({},state2.items); state.list.push(items); state2.items.id = ""; state2.items.con = ""; }; return {state,state2,addItem} } // 刪除 function userRemove(params) { const state = reactive({ list: [ { id: 1, con: "A", }, { id: 2, con: "B", }, { id: 3, con: "C", }, ], }); const removeItem = (index) => { state.list = state.list.filter((item, i) => i !== index); }; return {state,removeItem} } </script>

複製代碼

若是是其餘對象，默認狀況下修改對象，界面不會更新。

<template>
  <div>
    <p>{{state.time}}</p>
    <button @click="add">加一天</button>
  </div>
</template>

<script> import {reactive} from 'vue' export default { name:"Demo4", setup(){ const state = reactive( { time:new Date() } ); function add () { state.time.setDate(state.time.getDate()+1); console.log(state); } return { state, add } } } </script>

<style>

</style>
複製代碼

若是想更新，能夠經過從新賦值的方法。

<template>
  <div>
    <p>{{ state.time }}</p>
    <button @click="add">加一天</button>
  </div>
</template>

<script> import { reactive } from "vue"; export default { name: "Demo4", setup() { const state = reactive({ time: new Date(), }); function add() { const newTime = new Date(state.time.getTime()); newTime.setDate(state.time.getDate() + 1); state.time = newTime; console.log(state); } return { state, add, }; }, }; </script>

<style>
</style>
複製代碼

一樣，咱們開發者若是要是檢測一個數據是不是reactive類型的。能夠用isReactive(數據)，返回true或者false。

import {isReactive} from 'vue'
複製代碼

4、組合API本質

compositionAPI與optionAPI能夠混合使用。其本質是注入。

<template>
  <div>
    <p>Vue2.x</p>
    <button @click="cli1">點擊</button>
    <p>Vue3.0</p>
    <button @click="cli2">點擊</button>
  </div>
</template>

<script> import {ref} from "vue" export default { name:"Demo2", data(){ return { msg:"Vue2.x" } }, methods:{ cli1(){ alert(this.msg); } }, setup(){ let txt = ref("Vue3.0"); // 注入到data函數內 function cli2() { // 注入到methods屬性內 alert(txt.value); } return { txt, cli2 } } } </script>

<style>

</style>
複製代碼

5、setup執行時機與注意事項

setup函數，是在beforecreate鉤子以前完成的。因此沒法使用data跟methods。 另外要注意的是setup是同步的，不是異步的。

<template>
  <div>
    <button @click="name">打開</button>
  </div>
</template>

<script> export default { name:"Demo3", data(){ return { msg:"hello" } }, setup(){ function name() { console.log(this.msg); // undefined } return { name } } } </script>

<style>

</style>
複製代碼

下一期繼續

• 歡迎關注個人公衆號前端歷劫之路

• 回覆關鍵詞電子書，便可獲取12本前端熱門電子書。

• 回覆關鍵詞紅寶書第4版，便可獲取最新《JavaScript高級程序設計》（第四版）電子書。

• 關注公衆號後，點擊下方菜單便可加我微信，我拉攏了不少IT大佬，建立了一個技術交流、文章分享羣，期待你的加入。

• 做者：Vam的金豆之路

• 微信公衆號：前端歷劫之路