Vue3学习，项目搭建，以及简单语法练习,持续更新

安装脚手架

npm install @vue/cli -g

创建项目

vue create vue_admin3.0

安装路由（4.0）

npm install vue-router@4.0.0-beta.6 -S   

删除node_modules 文件夹

rimraf node_modules 

安装less(报错就修改版本)

cnpm i less less-loader --save-dev

Vue3.0练习语法

<template>
  <div>
    <img alt="Vue logo" src="@/assets/logo.png" />
    <div>home页面</div>
    <p>{{ val }}</p>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="handle(item)">
        {{ item }}
      </li>
    </ul>
    <div>
      <h4>点击了{{ checkitem }}</h4>
    </div>
    <div>
      <p @click="changeHandle">{{ msg }}</p>
    </div>
    <div @click="changeHandle2">{{ person.name }}{{ person.age }}</div>
    <div>
      <span class="btngopage" @click="$router.push('/Myinfo')">跳转第二个页面</span>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "",
  setup() {
    let val = ref("小明的爸爸叫什么？");
    const list = ref(["坦克", "手枪", "奥特曼"]);
    const checkitem = ref("");
    const handle = (item) => {
      checkitem.value = item;
    };

    let msg = ref("初始化"); //string number
    let person = reactive({ name: "lisi", age: 20 }); // object array
    const changeHandle = () => {
      msg.value = "改变的";
    };
    const changeHandle2 = () => {
      person.age = 30;
    };
    return {
      val,
      list,
      handle,
      checkitem,
      msg,
      person,
      changeHandle,
      changeHandle2,
    };
  },
};
</script>
<style scoped lang="less">
.btngopage{
  display: inline-block;
  background-color: rgb(255, 208, 0);
  line-height: 40px;
  height: 40px;
  font-style: 14px;
  padding: 0 20px;
  text-align: center;
  border-radius: 5px;
}
</style>

vue3生命周期

<template>
    <div>
        <h3>vue3系列生命周期</h3>
        <div>
            <h4>beforeCreate -> 使用 setup()</h4>
            <h4>created -> 使用 setup()</h4>
            <h4>beforeMount -> onBeforeMount</h4>
            <h4>mounted -> onMounted</h4>
            <h4>beforeUpdate -> onBeforeUpdate</h4>
            <h4>updated -> onUpdated</h4>
            <h4>beforeDestroy -> onBeforeUnmount</h4>
            <h4>destroyed -> onUnmounted</h4>
            <h4>errorCaptured -> onErrorCaptured</h4>
        </div>
    </div>
</template>
<script>
import {onBeforeMount ,onUpdated, onBeforeUnmount,onUnmounted,onErrorCaptured} from "vue"
export default {
    setup() {
        onBeforeMount(()=>{
            console.log("onBeforeMount","挂载")
        })
        onUpdated(()=>{
            console.log("onBeforeMount","更新")
        })
        onBeforeUnmount(()=>{
            console.log("onBeforeUnmount")
        })
        onUnmounted(()=>{
            console.log("onUnmounted")
        })
        onErrorCaptured(()=>{
            console.log("onErrorCaptured")
        })
    }
}
</script>

watch使用

<template>
    <div>
        <input type="text" v-model="state">
        <div>{{state}}</div>
        <input type="text" v-model="data.count">
        <div>{{data.count}}</div>
        <div>{{data.name}}</div>
        <br/>
        <h3>watchEffect 它与 watch 的区别主要有以下几点：</h3>
        <div>不需要手动传入依赖<br/>
        每次初始化时会执行一次回调函数来自动获取依赖<br/>
        无法获取到原值，只能得到变化后的值
        </div>
    </div>
</template>
<script>
import {ref ,watch ,reactive,watchEffect} from "vue"
export default {
    setup(){
        const state = ref(0);
        const data = reactive({count: 0,name: 2 });
        watch(state,(newvalue,oldvalue)=>{
            console.log(newvalue,oldvalue)
        });
        watch(()=>data.count,(newvalue,oldvalue)=>{
            console.log(newvalue,oldvalue)
        })
        watchEffect(() => {
          console.log(data.name)
          })
        setTimeout(() => {
            data.name = data.name++
          }, 1000)
        return{
            state,data
        }
    }
}
</script>
<style scoped>

</style>