Vue3.0 && Vue3.0初體驗一

時間 2020-07-06

標籤 vue3.0 vue 體驗简体版

原文原文鏈接

前言

前幾天同事問我
同事： Vue3.0學了嗎?
我:：3.0? 我如今學他幹嗎,尤大大說最近還會更新2.7呢,如今學了到時候確定忘啊。
同事： Vue3.0 和 React有點像了。
因而： css

提醒

這是Vue3.0初體驗第一章，能用幾張章把Vue3.0寫完？如今仍是個迷，可能一章,也有可能兩章......，你們一塊兒期待吧！前端

vue2.x -> vue3.0 變化

Vue3.0 能夠徹底支持Vue2.0!!!!, 升級之後不須要更改關於Vue的代碼,可是你引用的插件就...,看運氣了.

在說變化以前，咱們先看一下vue3.0怎麼建立項目.vue

第一種方法：vitejava

npm init vite-app 項目名
cd 項目名
npm run dev
複製代碼

優勢: 快就完了. (不須要經過webpack編譯)
缺點: 不穩定,還要須要本身安裝 vue-router, vuex, (敲重點,vue-router, vuex都要用4.0, 安裝的時候還容易出錯, enenen,出錯確定是我電腦問題, 和vite沒有關係.... react

不穩定也是我的感受,你們能夠試一下,vite應該仍是很好用的,否則尤大大也不會連發6條微博來證實

第二種方法

npm install -g @vue/cli
vue create 項目名
vue add vue-next //重點 執行這行,會把2.0代碼改成3.0的, vue-router, vuex會變成4.0的
cd 項目名
npm run serve
複製代碼

這個優缺點就不說了, 畢竟你們都是老手!webpack

變化一 mian.js

mian.js裏的變了多了createApp方法git

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './App.scss'

const app = createApp(App)
app.use(router).use(store).mount('#app');
複製代碼

因爲這裏用了 import { createApp } from 'vue'; 而不是import Vue from 'vue', 全部使用一些Ui框架,以及第三方的包都會報如下的錯. github

遇到這個報錯,基本上就說明你用的這個插件不支持Vue3.0了.

變化二 Vue-router, Vuex

Vue-router, Vuex 有點小變化, 後面第二章再講,或者也能夠看一下個人源碼, 大家都是大牛,大家必定能夠一會兒就能夠看出來區別.web

變化三 template模板部分

vue2.0裏 template模板裏只能有一個根標籤, 而3.0可使用多個根標籤vue-router

Look here, template標籤有兩個div, 在2.0是會報錯的

變化四 Composition API

在vue2.0裏咱們都把.vue文件裏的js部分叫作Function API, 而在3.0裏變爲Composition API 這裏是變化最大的地方,快看下圖

(敲重點: import { setup, watch, reactive, toRefs, onMounted } from "vue")

看到這裏有何感想。en，咱們尚未開始，重點，Vue3.0新特性來了。

Composition API是什麼

setup 函數

setup 函數是一個新的Vue組件，是Composition API 入口

<template>
</template>
<script>
import { setup } from 'vue'
export default {
   setup(props, context) {
       //這裏的props你們應該知道是啥吧，父組件傳的值
       // context是什麼？
       //在setup()裏咱們不能用this
       //因此vue2.0裏的 this.$emit, this.$psrent, this.$refs在這裏都不能用了。
       //context就是對這些參數的集合
       //context.attrs
       //context.slots
       //context.parent 至關於2.0裏 this.$psrent
       //context.root 至關於2.0裏 this
       //context.emit 至關於2.0裏 this.$emit
       //context.refs 至關於2.0裏 this.$refs
       ...
   }
}
</script>
<style>
</style>
複製代碼

數據聲明

vue2.0 裏數據都是在data()裏聲明，而在3.0裏也取消了data(), 引用了Reactive(), ref()

ref()聲明單一基礎數據類型時使用

注意：定義的變量，函數都要 return 出來

<template>
  <div>{{count}}</div>
</template>
<script>
 import { setup， ref } from 'vue'
 export default {
    setup(props, context) {
        let count = ref(0)
        consloe.log(count.value) //0 ，  內部獲取時須要用.value來獲取
        console.log(isRef(count)) //true   //isRef() 用來判斷是否是ref對象
     return {
         count  // ref返回的是一個響應式的對象
     }
    }
 }
</script>
<style>
</style>

複製代碼

Reactive()聲明單一對象時使用

<template>
 <div>{{data1}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
   setup(props, context) {
        const obj = reacttive({
        data1: '123',
        data2: {}
    })
    
    return {
        ...torefs(obj)// 把obj轉爲響應式的ref，否則template裏獲取不到
    }
   }
}
</script>
<style>
</style>

複製代碼

watchEffect() 監聽props

// 父組件.vue
<template>
   <ZiComp val:'1'/>
</template>
<script>
import { setup } from 'vue'
import ziComp from './ziComp.vue'
export default {
  components： {
      ziComp
  }, //components方法也是和2.0相同
  setup(props, context) {
      
  }
}
</script>
-------------------------------------- 
//ziComp.vue
<template>
 <div>{{obj.data1}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  props: ['val'], //這裏獲取props和 2.0 同樣,也能夠用對象形式
  setup(props, context) {
     watchEffect(() => {  //首次和props改變纔會執行這裏面的代碼
         console.log(props.val)
     })
  }
}
</script>
<style>
</style>
複製代碼

watch() 監聽器

監聽單個數據

<template>
<div>{{count}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count1 = ref(0)
   let state = reactive({
      count2: 0
   )
    //監聽reactive類型
   watch(
   () => state.count2， //這裏是你要監聽的數據
   (count， preCount) => { //count新值， preCount舊值
       console.log('') //這裏是監聽數據變化後執行的函數
   }, {lazy： false}//在第一次建立不監聽)
   
   //監聽ref類型
     watch(count1，(count， preCount) => { //count新值， preCount舊值
       console.log('') //這裏是監聽數據變化後執行的函數
     })
   
   return {
       count
       ...toRefs(state)
   }
  }
}
</script>
<style>
</style>

複製代碼

監聽多個數據

<template>
<div>{{count}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count1 = ref(0)
    let name1 = ref(0)
   let state = reactive({
      count2: 0，
      name2： 'yangy'
   )
    //監聽多個reactive類型
   watch(
       [() => state.count2, () => state.name2]
       ([count， name], [preCount， preName]) => { //count新值， preCount舊值
           console.log('') //這裏是監聽數據變化後執行的函數
       }, 
       {
          lazy： false
   })//在第一次建立不監聽
   
   //監聽ref類型
  watch(
       [count2, name2]
       ([count， name], [preCount， preName]) => { //count新值， preCount舊值
           console.log('') //這裏是監聽數據變化後執行的函數
       }, {lazy： false}//在第一次建立不監聽)
   
   return {
       count，
       ...toRefs(state)
   }
  }
}
</script>
<style>
</style>

複製代碼

computed() 計算屬性可建立只讀，和可讀可寫兩種

<template>
<div>{{addCount}}</div>
<div>{{addCount2}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count = ref(0)
   
  setup () {
      const count = ref(0)
      const addCount = computed(() => count.value + 1) //只讀 ，count.value變化後執行加1
      
      const addCount2 = computed({
          get:() => count.value + 1,
          set: (value) => count.value = value 
      })    
      // addCount2.value = 10   //賦值方法
      
     return {
         count,
         addCount,
         addCount2
     }
  }
  }
}
</script>
<style>
</style>

複製代碼