vue3 setup语法糖

0. 路由跳转

a.vue

<script setup>
    //引入路由
    import { useRouter } from 'vue-router'
    // 定义路由
    const router = useRouter()
    // 编辑
    let editBtn = (info) => {
          router.push({
        　　path:'/detail.vue', 
        　　　　query:{
            　　　　name: info
        　　　　}
       　　})
    }
</script>

detail.vue

<script setup>
import { reactive, ref, onMounted } from "vue";
//引入路由
import { useRoute } from 'vue-router'
// 定义路由
const route = useRoute()
let title = ref('')
onMounted(()=>{
    title.value = route.query.name
})
</script>

<template>
    <div>ddd
        <div>{{title}}</div>
    </div>
</template>

1. watch监听  

　　watchEffect

import {ref,reactive, watchEffect } from 'vue'


watchEffect(()=>{
      console.log('watch', activeTitle.value)
})

　　watch

// 参数一：getter函数返回值name发生变化时，会执行对应的回调函数
const obj = reactive({ name: 0 })
watch(
    () => obj.name,
    (newVal, oldVal) => {console.log(newVal, oldVal)},
    {
        deep: true, // 开启深度监听
        immediate: true // 值如果是true会打开首次监听
    }
)

 

//监听ref
let name = ref('')
watch(name, (newVal,oldVal)=>{console.log(newVal)})

2. computed计算属性

<div>{{computedValue}}</div>

import {ref,reactive, computed } from 'vue'
const computedValue = computed(()=> {
      return '计算属性'
});

3. await数据获取

let tableData = reactive([])
let getList = async ()=>{
      let data = await getTag({type: "ai"}).then(res=>res.data)
      tableData.push(...data)   //vue3使用proxy数组和对象不可以直接赋值
}
onMounted (async() => { 
      getList()
});

4. 组间传参

　　父组件

<script setup>
import { reactive, ref, onMounted } from "vue";
//引入路由
import { useRoute } from 'vue-router'
// 定义路由
const route = useRoute()

let title = ref('')
let parValue = ref('')

let getReverse = (val)=>{
    parValue.value = val
}

// 调用子组件方法
const tab1Dom = ref()  //tab1Dom是定义子组件ref后的值
const parReverse = ()=>{
    tab1Dom.value.reversal()
}
onMounted(()=>{
    title.value = route.query.name
})
</script>

<template>
    <div class="detialPage">
        <h3>{{title}}</h3>
        <div class="">
            <el-input v-model="parValue" style="width:250px;" placeholder="Please input" />
            <el-button @click="parReverse" class="reBtn">sub反转事件</el-button>
        </div>
        <tab1 ref="tab1Dom" :parValue="parValue" @reverseVal="getReverse"></tab1>
    </div>
</template>

　　子组件

　　　　　全局编译器宏只能在 script-setup 模式下使用，script-setup 模式一共提供了 4 个宏，包括： defineProps、defineEmits、defineExpose、withDefaults

<script setup>
import {ref, defineProps} from 'vue'
let props = defineProps({
      parValue:{
            type: String,
      }
})
let emits = defineEmits(['reverseVal'])

let reversal = ()=>{
      // 获取父组件传来的值，进行反转再传递给父组件
      let newVal = props.parValue.split('').reverse().join('')
      emits('reverseVal', newVal)
}
// 父组件调用子组件的方法，子组件需要先暴露出该方法
defineExpose({
      reversal,
      name
})
</script>
<template>
      <div class="subCon">
            <div>
                  {{props.parValue}}
                  <el-button @click="reversal" class="reBtn">反转</el-button>
            </div>
      </div>
</template>

 5. vuex持久化存储

npm i vuex-persistedstate

main.js

import store from './store/index'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

index.js

import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'
export default createStore({
    state () {
        return {
            darkStatus: false
        }
    },
    mutations: {
        setDark (state, data) {
            state.darkStatus = data
        }
    },
    modules: {
    },
    plugins: [
        // veux持久化配置
        createPersistedstate({
            key: 'darkStatus',
        })
    ]
    
})

head.vue

import { useStore } from "vuex"
const store = useStore()
const getSwitch = (data)=>{
      store.commit("setDark", data)
}