天天看點
傳回

洞見未來vue3.0新篇章

就當你有vue2.x的基礎了

下面的vue.global.js怎麼來的

解釋一下

vue3.0的github位址

​​​https://github.com/vuejs/vue-next.git​​

git clone https://github.com/vuejs/vue-next.git

然後進入vue-next檔案夾

npm install 安裝依賴

然後進入package檔案夾

就會發現vue檔案夾 裡面存在dist檔案夾

然後裡面就有這個js檔案

先說基礎的html運作改變

為了避免很多不必要的加載依賴是以vue3.0是按需加載

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./vue.global.js"></script>
    //
  </head>
  <body>
    <div id="app">
    </div>
    <template id="root">
      <div>
        hello world
      </div>
    </template>
    <script>
    const {createApp}=Vue;
    var root={
      template:"#root",//指定模闆渲染
      setup(){
        console.log(123)
      }
    }
    createApp(root).mount("#app")
    //vue導出createApp方法 傳入模闆作為參數 然後挂載dom節點
    //createApp(App).use(router).use(store).mount('#app')
    //看一眼應該明白這是函數鍊的模式加載子產品
    </script>
  </body>
</html>

下面進行vue-cli腳手架的安裝

安裝最新的

@vue/cli 4.3.1 或以上 選擇對應的路由與vuex插件安裝

然後安裝完成 使用指令檢視vue -V版本

然後 vue add vue-next 這是更新到vue3.0版本 之前安裝的路由也會對應更新

npm run serve運作

下面進入vue3.0 cli的學習

先談生命周期

還是老樣子 初始化加載 beforecreate created beforemount mounted

setup(){//setup取代了beforecreate created
onBeforeMount(()=>{
      console.log("bemout")
    })
    onMounted(() => {//擷取dom節點是采用這個方法 生命周期隻能挂載在setup裡面
      console.log('mounted!')
    })
    onBeforeUpdate(()=>{
      console.log("123")
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onBeforeUnmount(()=>{
      console.log("befunmount")
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
}

然後談響應式資料

<template>
  <div id="a">
    <span ref="rec">123</span>
    <button @click="cli">點選</button>
  </div>
</template>

<script>
import {ref,reactive,toRefs,watch,watchEffect,computed, onMounted} from 'vue'
export default {
    setup(){
        const rec=ref(null)//建立響應式資料對象如果為null用來擷取元素dom
        const red=ref(0)//指派了就做響應式資料isRef判斷資料是否是ref對象
        console.log(red.value)//擷取red的資料
        onMounted(()=>{//加載完成的鈎子函數擷取節點
            console.log(rec)
        })
        const state=reactive({//做響應式資料集合，也可以把ref放進來就不用ref.value擷取值了
            count:0,
            index:1
        })
        watch(state,(old,n)=>{
    //做監聽資料是深入監聽state是對象 可以監聽對象的任意屬性嵌套也沒問題
        })
        const stop=()=>stop()//停止監聽
        watchEffect(()=>{//當監聽資料發生變化觸發函數
            console.log(`${state.count}`)
        })
        const com=computed(()=>{return 1})//計算機屬性上面隻能讀不能修改
     //computed({get:()=>{},set:val=>{state.count=val+'a'}}可讀可修改
        const cli=()=>{//點選事件
            console.log("hello world")
        }
        return {
            rec,
            ...state,//如果不用拓展運算符那麼資料在模闆顯示就{{state.count}}
            ...toRefs(state),//把資料響應式state對象資料轉化為ref響應式變量顯示{{count}}
            com,
            cli
        }
    }
}
</script>

<style>

</style>

做響應式資料

一個是ref 一個是toRefs 一個是reactive三個都可以

講setup方法

這是main.js的内容

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

createApp(App).use(router).use(store).mount('#app')
//把路由vuex加載進來

router 檔案

import { createRouter, createWebHashHistory，createWebHistory } from 'vue-router';
//之前是new Router({
//mode:"history"//hash,
//[{
//path:"",
//name:"",component:""
//}]
//})
import Home from '../views/Home.vue'

const routes = [
{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: () => import( '../views/About.vue')
}
]

const router = createRouter({
  history: createWebHashHistory(),//createWebHistory使用沒有#的url路由
  routes
})

現在是導出createRouter({

history：方法

routes

})方法

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    sun:"悟空"
  },
  mutations: {
    but(state,a){
        console.log(state.sun+a)
    }
  },
  actions: {
    bu(con){
      con.commit("but",1)
    }
  },
  modules: {

  },
  getters:{
      
  }
});
//vuex.store({}) 換成了createStore({})      
import {useStore} from 'vuex'//使用vuex必須導出useStore
import {useRouter,useRoute} from 'vue-router'//使用路由必須導出useRouter
//而擷取路由資訊useRoute 然後在setup裡面執行個體化控制台輸出就可以看見

export default {
  name:"app",
  props:{
    name:{
      type:String
    }
  },
  setup(props,content){  
  //props接收父元件的傳參 content接收上下文目前我寫的時候隻有emit,attr,slots
  //vue2.x的options root lib chi par 還沒有
    const router=useRouter()//執行個體化路由 很多與vue2.x都一樣了
    const vuex=useStore()
    vuex.dispatch()//vuex.commit()對應mutations，vuex.dispatch()對actions
    //const route=useRoute()
    //console.log(route.params或query)
    const tiao=()=>{
      router.push({
        name:"About",
        params:{
          a:{
            liu:"yong"
          },
          b:"wq"
        }
      })
    }
    return {
      tiao//輸出方法 @click事件接收做跳轉
    }
  }
}
</script>      
[[Handler]]: Object
deleteProperty: ƒ deleteProperty(target, key)
get: ƒ (target, key, receiver)
has: ƒ has(target, key)
ownKeys: ƒ ownKeys(target)
set: ƒ (target, key, value, receiver)
__proto__: Object
[[Target]]: Object
fullPath: {__v_isRef: true, effect: ƒ}
hash: {__v_isRef: true, effect: ƒ}
matched: {__v_isRef: true, effect: ƒ}
meta: {__v_isRef: true, effect: ƒ}
name: {__v_isRef: true, effect: ƒ}
params: {__v_isRef: true, effect: ƒ}
path: {__v_isRef: true, effect: ƒ}
query: {__v_isRef: true, effect: ƒ}
redirectedFrom: {__v_isRef: true, effect: ƒ}
vue 資料 響應式 加載
上一篇: HDU 1061 Rightmost Digit
下一篇: IllegalArgumentException: Invalid character found in method name HTTP method names must be tokens

繼續閱讀