vue3.0初体验

创建项目

// 最好将vue脚手架工具升级到最新的cli 4.x,在cli3.x的上执行vue add vue-next会报错。
npm install -g @vue/cli 
vue create 项目名
cd 项目名
vue add vue-next // 重点 执行这行,会把2.0代码改为3.0的, vue-router, vuex会变成4.0的
npm run serve

main.js文件的变化

// vue3.0
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");

// vue2.0
import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

几个属性及常用的方法，将2.0和3.0进行一些对比

1. Data

// vue2.0
export default {
  name: 'login',
  data() {
    return {
     userName: "",
     passWord: "",
    }
  },
  mounted() {},
  methods: {}
}

// vue3.0
import {reactive} from 'vue'
export default {
  setup(props, context) {
   // 创建数据,与2.x里data()相同
   // context.attrs
   // context.slots
   // context.refs
   // context.emit
   // context.parent
   // context.root
    const state = reactive({
      userName: "",
      passWord: "",
    })
    return {
      ...toRefs(state), // 把一个响应式对象转换成普通对象
    }
  }
}

注：在新版当中setup等效于之前2.0版本当中的beforeCreate,和created，它是在组件初始化的时候执行，甚至是比created更早执行。值得注意的是,在3.0当中如果你要想使用setup里的数据，你需要将用到值return出来，返回出来的值在模板当中都是可以使用的。

2. Method

<div class="login-form">
	<div class="from-item">
    	<label for="用户名" class="label">用户名:</label>
        <input placeholder="请输入用户名!" type="text" v-model="userName"/>
    </div>

    <div class="from-item">
    	<label for="密码" class="label">密 码:</label>
        <input placeholder="请输入密码!" type="password" v-model="passWord"/>
    </div>
    
    <div class="from-btn-group">
    	<button class="btn-style" @click="submit">登录</button>
    </div>
</div>

import {reactive} from 'vue'
export default {
  setup(props, context) {
    // 创建数据,与2.x里data()相同
    const state = reactive({
      userName: "",
      passWord: "",
    })

	const submit = async () => {
       const { userName, passWord } = state
       console.log(userName, passWord )
    }
    
    return {
      ...toRefs(state), // 把一个响应式对象转换成普通对象
      submit, 
    }
  }
}

3. 生命周期

选项 API 生命周期选项和组合式 API 之间的映射

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeUnmount -> onBeforeUnmount
• unmounted -> onUnmounted
• errorCaptured -> onErrorCaptured
• renderTracked -> onRenderTracked
• renderTriggered -> onRenderTriggered

import {reactive, ref, onMounted} from 'vue'
export default {
  setup(props, context) {
    // 创建数据,与2.x里data()相同
    const state = reactive({
      userName: "",
      passWord: "",
    })

	const submit = async () => {
       const { userName, passWord } = state
       console.log(userName, passWord )
    }
    
   onMounted(()=>{
      console.log('登录表单')
   })
    
    return {
      ...toRefs(state), // 把一个响应式对象转换成普通对象
      submit, 
    }
  }
}

4. computed

import {reactive, ref, onMounted,computed} from 'vue'
export default {
  setup(props, context) {
    const count=ref(0)
    
    const increamt=()=>{
     count.value++
    }
    
   const computeCount=computed(()=>count.value*10)// 使用computed记得需要引入
    
    return {
      count,
      computeCount,
      increamt,
    }
  }
}

组件使用方法

// vue 2.0
// 父组件
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" @childclick="parentClick"/>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
      parentClick(e){
          console.log(e)// '123'
      }
  }
}
</script>

// 子组件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      
    }
  },
  method:{
    handleClick(){
      this.$emit('childclick','123')
    }
  }
}
</script>

// vue 3.0
// 父组件
<template>
  <div class="hello">
    <div>123</div>
  <HelloWorld :name="name" @childClick="parentClick"/>
  </div>
  
</template>

<script>
import {reactive} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default {
  components:{
    HelloWorld 
  },
 setup(){
   const name=ref('vue3')
   const parentClick=(e)=>{
     console.log(e)
     console.log('123')
   }
   return {name,parentClick}
 }  
}
</script>

// 子组件
<template>
    <div>
        <button @click="handleClick">{{props.name}}</button>
    </div>
</template>

<script>
export default {
    props:{
        name:String
    }
    setup(props,{emit} ){
        const handleClick=()=>{
            console.log(props)//proxy{name:'vue3'}
            emit('childClick','hello')
        }
        return {
            props,
            handleClick
        }
    }
}
</script>

setup为我们提供了props以及context这两个属性，而在context中又包含了emit等事件。在3.0当中已经不在使用this关键词当你在setup()里打印this关键词,会发现输出为undefined,所以不能用this.$emit的方法来向外触发子组件事件。

组合式api
vue官网