vue3语法糖的使用和定义、语法糖中路由的使用、语法糖中状态管理的使用、语法糖中组件的传值

1.vue2和vue3区别

1.1 vue3中vue是一个对象，可以使用按需导入

import {createApp} from 'vue ’

1.2 导入区别

• vue2中使用的vue-router3.0导入的是构造函数 new VueRouter()
• vue3中使用的vue-router4.0导入的是对象 createRouter()

1.3 语法

vue2语法在vue3中都可以使用，除了过滤器并不能使用

2. vue3脚手架

脚手架中的路由有三种模式：历史模式history、哈希模式hash、抽象模式abstract

2.1 脚手架配置

vue create projectname------Manually select features--------Babel(js编译器)、Router、Vuex、CSS Pre-processors(css预处理器)

3.语法糖

3.1 组件的样式绑定

补：scss语法和less语法动态绑定数据

在vue中的setup函数中定义一个常量，vue3单文件组件中，支持style样式绑定变量，使用v-bind()引入动态值。组件中的数据只能绑定到组件内的标签上，组件外的标签绑定无效

 setup(props) {
            const myColor = ref("red")
            const size = ref(20)
            const mySize = computed(() => {
                return size.value + "px"
            })
            return {
                myColor,
                size,
                mySize
            }
        }

 body {
        background-color: v-bind(myColor);
    }

3.2 语法糖

vue3单文件组件提供了一种更简洁的语法结构，称之为“语法糖”

3.2.1 使用语法糖

1.在script标签上添加setup属性即变为糖衣语法，相当于整个script就是组件的setup函数

2.在语法糖中，省略了导出export default() 省略了setup函数，省略了return()

3.定义的数据无需return即可在模板和样式中调用

4.语法糖中，子组件导入即可使用，无需在components中注册

<script setup>
    import {
        ref
    } from "vue";
    const count = ref(0) 
</script>

3.3语法糖组件传值

3.3.1 父传子

在父组件中子组件标签使用未定义的数据变量向子组件传值，在子组件的语法糖中使用defineProps()声明自定义属性用于接收父组件传值

defineProps定义props的函数，函数参数可以是一个数组直接接收数据，参数是一个对象用于属性验证。

获取父组件向子组件传值通过定义的defineProps函数返回值调用传递的值

<script setup>
    const props=defineProps(["msg","info"])
    console.log(props.msg);//获取传值
</script>

3.3.2 子传父

在语法糖中使用defineEmits()注册自定义事件用于向父组件传值，返回是emit函数.在父组件中使用绑定自定义事件来拿到子组件向父组件的传值

defineEmits()函数参数是一个数组，用于定义自定义事件，可以是小驼峰也可以是全部小写，但是在绑定自定义事件书写应为全部小写。

子组件中：

<script setup>
    import {
        ref,
        watch
    } from "vue"
    const name = ref("")
    const emit = definedEmits(["myName"])
    watch(name, newValue => {
        emit("myName", newValue)
    })
</script>

父组件：

<HelloWorld msg="123" @my-name="value=>{age=value}"/>

3.4 语法糖中的路由

在语法糖中需要用到路由信息对象route和路由配置对象router必须按需引入对象，才可以使用

3.4.1 在语法糖中引入路由

在语法糖中引入路由配置对象和路由信息对象：

import {useRoute, useRouter} from "vue-router"

3.4.2 在语法糖中使用路由

利用const定义一个常量定义路由

    const route = useRoute()
    const router = useRouter()

3.4.3 在语法糖中实现路由跳转

html:

    <button @click="goToHome">去主页</button>

javascript:

    function goToHome() {
        router.push("/")
    }

3.5 语法糖的状态管理

在语法糖中使用状态管理首先也需要引入状态管理对象

3.5.1 引入状态管理

    import { useStore } from "vuex"

3.5.2 定义状态管理仓库

在含有router的vue项目中store文件夹下的index.js文件中定义你所需要的状态管理的变量。仓库中state对象中定义变量isLogin。想要改变变量的值需要在mutations中定义修改变量的函数setisLogin，含有两个参数，第一个参数state为仓库中state定义的变量对象，第二个参数value是定义的新值。

import { createStore } from 'vuex'

export default createStore({
    state: {
        isLogin: false
    },
    getters: {},
    mutations: {
        setisLogin(state, value) {
            state.isLogin = value
        }
    },
    actions: {},
    modules: {}
})

3.5.2.1 在语法糖中调用状态管理仓库中的变量

在组件使用之前，需要在js中导入store仓库才能使用状态管理。在组件中使用store.sate.isLogin打点调用仓库state对象中变量的值

引入状态管理仓库：

    import {
        useStore
    } from "vuex"

显示状态管理仓库的变量

    <h1>{{store.state.isLogin}}</h1>

3.5.2.2 改变状态管理仓库中的变量值

改变状态管理仓库中的变量值，需要现在状态管理仓库中的mutations对象中定义改变变量值的函数

export default createStore({
    state: {
        isLogin: false
    },
    getters: {},
    mutations: {
        setisLogin(state, value) {
            state.isLogin = value
        }
    },
    actions: {},
    modules: {}
})

在组件中使用状态管理对象的commit函数修改变量值，参数一为状态管理中的修改变量值的函数名，第二个参数是修改后的新的变量值

html：

    <button @click="goToHome">去主页</button>

javascript:

    function goToHome() {
        router.push("/")
        store.commit("setisLogin", true)
    }