vue3.0学习

基本框架

<template>
    <div class="">
        
    </div>
</template>

<script setup>
import {} from 'vue'
    
</script>

<style lang="scss" scoped>
    
</style>

vue3.2版本推出了setup语法糖，不用向之前vue3.0，写完函数还要return出去。vue3.0推出了组合式api，下面演示如何定义变量。

<script setup>
import {ref,reactive} from 'vue'
    let number = ref(0)
    let data = reactive({
        tableData:[]
    })
    let changeNumber = ()=>{
        number.value = 1
        data.tableData = [{value:"演示数据"}]
    }
</script>

注意，在js里面使用ref定义的值需要.value,但是在html中显示变量不用写.value。

vue3.0使用生命周期函数。

<script setup>
import {ref,reactive,onMounted} from 'vue'
    let number = ref(0)
    let data = reactive({
        tableData:[]
    })
    let changeNumber = ()=>{
        number.value = 1
        data.tableData = [{value:"演示数据"}]
    }
    onMounted(()=>{
        changeNumber()
    })
</script>

需要注意，vue3.0使用生命周期需要在vue中进行引入，生命周期均是在vue2.0的基础上面加了on，另外3.0版本没有生命周期onBeforeCreate和onCreated,setup代替了这两个生命周期，另外在setup中无法使用this。

vue3.0使用侦听器和计算属性

<script setup>
import {ref,reactive,onMounted,watch,watchEffect,computed} from 'vue'
    let number = ref(0)
    let data = reactive({
        tableData:[]
    })
    //监听数值
    watch(number,(n,o)=>{
        console.log(n,o);
    },{immediate:true})//是否开启首次监听
    //监听对像中的某一项值
    watch(()=>data.tableData,(n,o)=>{
        console.log(n,o);
    })
    watchEffect(()=>{
        let m = number.value
        console.log("number值发生改变",m);
    })
    //计算属性
    let titles = computed(()=>{
        return data.tableData.title
    })
</script>

vue3.0父子组件传值

<!-- 父组件 -->
<template>
    <div class="">
        <child @fuzu="fuzu" :data="data.tableData" />
    </div>
</template>


<script setup>
import {ref,reactive,onMounted,provide} from 'vue'
import child from '../child.vue'
    let number = ref(0)
    let data = reactive({
        tableData:[]
    })
    let changeNumber = ()=>{
        number.value = 1
        data.tableData = [{value:"演示数据"}]
    }
    //接受子组件的值
    const fuzu = (e)=>{
        alert(e)//子组件传过来的值
    }
    //第二种传值方式
    provide("erzi","父组件传过来的信息")
    onMounted(()=>{
        changeNumber()
    })
</script>

<!-- 子组件 -->
<template>
    <div class="">
        {{data}}
        {{info}}
        <button @click="checkBox">子组件按钮</button>
    </div>
</template>


<script setup>
import {ref,reactive,onMounted,defineProps,inject,defineEmits} from 'vue'
    let props = defineProps({
        data:{
            type:Array,
            default: '默认值'
        }
    })
    let number = ref(0)
    let data = reactive({
        tableDatas:[]
    })
    //子组件向父组件传值
    const emit = defineEmits(["fuzu"])
    const checkBox = ()=>{
        emit("fuzu","子组件传来的值")
    }
    //接受父组件的传值
    let info = inject("erzi")
    onMounted(()=>{
        //使用父组件传过来的值
        data.tableDatas = props.data
        changeNumber()
    })
</script>

需要注意，由于没有了this，所有子组件向父组件传值时需要引入defineEmits来定义事件的名称，另外provide，inject这种传值比普通的props传值更方便，父组件传的值可以在后代组件中取到(据说provide inject可以取代vuex😜)。

vue3.0中路由跳转的使用

<script setup>
import {ref,reactive,onMounted} from 'vue'
//第二种方式是把路由的文件直接引过来
import router from '../router/index.js'
import { useRouter } from 'vue-router'
    //第一种方式
    let router = useRouter()
    router.push("/")
</script>

vue3.0中vuex的使用

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {useStore} from 'vuex'
let store = useStore(store)
//获取vuex中user中username的值
let user = computed(()=>store.state.user.username)
let changeVuex = ()=>{
    store.commit("user/SET_USERINFO",obj)
}
</script>

vuex user文件

const user = {
  namespaced: true,
  state: {
    username: "管理员",
    password: ""
  },

  mutations: {
    SET_USERINFO: (state, userInfo) => {
      state.username = userInfo.username ? userInfo.username : "";
      state.password = userInfo.password ? userInfo.password : "";
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      commit("SET_USERINFO", userInfo)
    }
  }
};
export default user;

vue3.0模板引用refs

<template>
    <div class="">
        <div refs="div"></div>
    </div>
</template>


<script setup>
import {ref,reactive,onMounted,provide} from 'vue'
    let div = ref(null)
    onMounted(()=>{
        console.log(div.value)//获取div元素
    })
</script>