Vue3簡介

發(fā)展

• 2020年9月18日，Vue.js發(fā)布3.0版本，代號：One Piece（海賊王）
• github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

提升

性能的提升、源碼的升級、更好的支持TypeScript、新的特性

創(chuàng)建Vue3工程

使用vue-cli創(chuàng)建

官方文檔

1. 確保vue/cli版本在4.5.0以上

vue --version

2. 安裝或者升級@vue/cli

npm install -g @vue/cli

3. 創(chuàng)建

vue create vue-test

4. 啟動

cd vue_test
npm run serve

使用vite創(chuàng)建

• 官方文檔
• vite官網
• 優(yōu)勢如下
  • 開發(fā)環(huán)境中，無需打包操作，可快速的冷啟動。
  • 輕量快速的熱重載（HMR）。
  • 真正的按需編譯，不再等待整個應用編譯完成。

1. 創(chuàng)建工程

npm init vite-app <project-name>

2. 進入工程

cd <project-name>

3. 安裝依賴

npm install

4. 運行

npm run dev

分析工程結構（由vue-cli創(chuàng)建的）

文件目錄類似Vue2

main.js

//引入的不再是Vue構造函數(shù)了，引入的是一個名為createApp的工廠函數(shù)
import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app')

//創(chuàng)建應用實例對象-app(類似于vue2中的vm，但app比vm更“輕”)
const app=createApp(App)
console.log("app",app)
//掛載
app.mount('#app')

setTimeout(()=>{
    //卸載
    app.unmount("#app")
},5000)

//對比：vue2中的寫法
/*const vm=new Vue({
    render:h=>h(App)
})
vm.$mount("#app")*/

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //關閉語法檢查
})

App.vue

<template>
<!-- Vue3的組件中的模板結構可以沒有根標簽-->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

安裝開發(fā)者工具

初識setup

setup的兩種返回值

返回一個對象

App.vue

<template>
  <h1>一個人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <button @click="sayHello">說話</button>
</template>

<script>
import {h} from 'vue'
export default {
  name: 'App',
  //此處只是測試一下setup，暫不考慮響應式的問題
  setup(){
    //數(shù)據(jù)
    let name="張三"
    let age=18

    //方法
    function sayHello(){
      alert(`我叫${name},今年${age}歲了~`)
    }
    //返回一個對象（常用）
    return{
      name,
      age,
      sayHello
    }
    //返回一個函數(shù)（渲染函數(shù)）
    // return ()=>h('h1','個人信息')
  }
}
</script>

返回一個函數(shù)

App.vue

<template>
  <h1>一個人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <button @click="sayHello">說話</button>
</template>

<script>
import {h} from 'vue'
export default {
  name: 'App',
  //此處只是測試一下setup，暫不考慮響應式的問題
  setup(){
    //數(shù)據(jù)
    let name="張三"
    let age=18

    //方法
    function sayHello(){
      alert(`我叫${name},今年${age}歲了~`)
    }
    //返回一個對象（常用）
    /*return{
      name,
      age,
      sayHello
    }*/
    //返回一個函數(shù)（渲染函數(shù)）   
    return ()=>h('h1','個人信息')
  }
}
</script>

Vue2與Vue3混合使用

App.vue

<template>
  <h1>一個人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>性別：{{sex}}</h2>
  <h2>a:{{a}}</h2>
  <button @click="sayHello">說話</button>
  <br>
  <br>
  <button @click="sayWelcome">說話</button>
  <br>
  <br>
  <button @click="test1">測試一下在Vue2的配置中去讀取Vue3中的數(shù)據(jù)、方法</button>
  <br>
  <br>
  <button @click="test2">測試一下在Vue3中的setup配置中去讀取Vue2的數(shù)據(jù)、方法</button>
</template>

<script>
import {h} from 'vue'
export default {
  name: 'App',
  data(){
    return{
      sex:"男",
      a:100
    }
  },
  methods:{
    sayWelcome(){
      alert("你好"+this.sex+"士，歡迎光臨")
    },
    test1(){
      console.log("name",this.name)
      console.log("age",this.age)
      console.log("sex",this.sex)
      console.log("sayHello",this.sayHello)
      console.log("sayWelcome",this.sayWelcome)
    },

  },


  //此處只是測試一下setup，暫不考慮響應式的問題
  setup(){
    //數(shù)據(jù)
    let name="張三"
    let age=18
    let a=200

    //方法
    function sayHello(){
      alert(`我叫${name},今年${age}歲了~`)
    }
    function test2(){
      console.log('------------------------')
      console.log('name',name);
      console.log('age',age)
      console.log('sex',this.sex)
      console.log('sayWelcome',this.sayWelcome)
    }
    //返回一個對象（常用）
    return{
      name,
      age,
      sayHello,
      test2,
      a
    }
    //返回一個函數(shù)（渲染函數(shù)）
    // return ()=>h('h1','個人信息')
  }
}
</script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-410725.html

總結

1. 理解：Vue3.0中一個新的配置項，值為一個函數(shù)
2. setup是所有Composition API(組合API)“表演的舞臺”
3. 組件中所用到的：數(shù)據(jù)、方法等等，均要配置在setup中
4. setup函數(shù)的兩種返回值：
   （1）若返回一個對象，則對象中的屬性、方法，在模板中均可以直接使用（重點關注！）
   （2）若返回一個渲染函數(shù)，則可以自定義渲染內容（了解）
5. 注意點：
   （1）盡量不要與Vue2.x配置混用

• Vue2.x配置（data、methods、computed…）中可以訪問到setup中的屬性、方法
• 但在setup中不能訪問到Vue2.x配置（data、methods、computed…）
• 如果有重名，setup優(yōu)先
  （2）setup不能是一個async函數(shù)，因為返回值不再是return的對象，而是promise，模板看不到return對象中的屬性

到了這里，關于Vue3技術1之Vue3簡介、創(chuàng)建Vue3工程、分析工程結構、安裝開發(fā)者工具與初識setup的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！