天天看点
返回

洞见未来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

继续阅读