vue3的一些配置

---

前言

提示：vue3配置的一些问题：

一、程序主入口文件 main.js

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

store:

import createStore from 'vuex'
const store:any = createStore({
    state: {

    },
    mutations: {

    },
    actions: {

    },
    modules: {
       
    }
})
export default store

router:

注意：我这是ts文件，如果是js的话就没必要用接口约束了

import { createRouter,createWebHashHistory,RouteRecordRaw } from "vue-router";
import home from '../views/home.vue'
const routes:Array<RouteRecordRaw> = [//RouteRecordRaw 用来约束routes
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "home",
    component:home
  },
  {
    path: "/hook",
    name: "hook",
    component:() => import("../views/hook.vue")
  },
]

export  const router = createRouter({
    history: createWebHashHistory(),
    routes:routes
  })

二、下面是一些vue2和vue3的一些对比

• vue2.0 选项式api

data() {
       return {
           msg: "初始化"
       }
   },
   methods: {
       changeHandle() {
           this.msg = "改变的"
       }
   },

• vue3.0 组合式api

setup() {
       let msg = ref("初始化");//string number
       let person = reactive({name:"lisi",age:20})// object array
       const changeHandle = () => { msg.value = "改变的" }
        const changeHandle2 = () => { person.age = 30 }
       return {
           msg,
           changeHandle,
           changeHandle2
       }
   },

• vue2.0 watch选项式api

  watch: {
    //普通的
    msg:{
        handler(newValue,oldValue) {
            console.log("....")
        }
    },
    //深度
    person:{
        handler(newValue,oldValue) {

        },
        immediate:true,
        deep:true
    }
},

• vue3.0 watch组合式api

 setup() {
        let msg = ref("初始化");//string number
        let person = reactive({name:"lisi",age:20})// object array
        watch(msg,(newValue,oldValue)=>{
            console.log(this);//undefined;箭头函数绑定父级作用域的上下文，所以this不会指向当前的组件
            console.log(newValue,oldValue);
        },{deep:false,immediate:false})

        watch(() => person.age,(newValue,oldValue) => {
          console.log(newValue,oldValue)
      })
        return {
            msg
        
        }
    }, 

• vue2.0 computed使用

  computed:{
     //无参数
        filterMsg() {
            return this.msg + "999"
        },
        //有参数
        filterMsg2(number) {
            return function() {
                return this.msg + number;
            }
        },
        // 自定义set方法
        filterMsg3: {
            get() {
                return this.msg + "999"
            },
            set(value) {
                ...
            }
        }
    }

• vue3.0 computed使用

  //无参数
     const filterMsg =computed( () => msg.value + "fdfasdf")
     //有参数
     const filterMsg2 =computed(() => {
         return function(num) {
             return msg.value + num
         }
     })
     // 自定义set方法和get方法
    const count = ref(1)
    const plusOne = computed({
        get: () => count.value + 1,
        set: val => {
            count.value = val - 1
        }
    })

    plusOne.value = 1
    console.log(count.value) // 0

2.组件间的通信

在了解组件通信之前，我们先要深入了解setup，render方法,this,。

toRefs

注意：

但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
我们可以通过 toRefs方法完成可以解构赋值，且不影响属性的响应式

    <template>
    <div>
        <!-- <div>{{state2.name}}123</div> -->
        <div>{{ name2 }}123</div>
        <div>{{ age2 }}</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'

function userFeatureX() {
    let state = reactive({
        name2: '你好',
        age2: 10,
    })
    return {
        ...toRefs(state)
    }
}
export default defineComponent({
    setup() {
        let { age2 , name2 } = userFeatureX()
        //toRef可以把响应式对象装换成普通对象，该普通对象的每一个property都是一个ref
        // let state2 = toRefs(state)
        // let {name,age} = toRefs(state)
        //使用定时器更新数据(如果数据变化，界面数据会随之变化，这样的话肯定是响应式数据)
        // window.setInterval(()=>{
        //     // state.name += '=='
        // },2000)
        return {
            name2, age2
            // state2,
            // ...state,==>这样就不是响应式数据了
        }
    }
})
</script>

祖孙级通信：

祖级：

<template>
  <div> 
      <h2>provide和inject实现跨层级（祖孙）组件之间的通信</h2>
        <p>当前的颜色：{{color}}</p>
        <button @click="color = 'red'">红色</button>
        <button @click="color = 'blue'">蓝色</button>
        <button @click="color = 'green'">绿色</button>
        <hr/>
        <Son/>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, provide } from 'vue'
import Son from '../components/son.vue'
export default defineComponent({
    components: {
        Son,
     },
    setup(){
        let color = ref('red')
        //提供数据
        provide('color',color)
        return{
            color,
        }
    }
})
</script>

<style scoped>

</style>

孙级：

<template>
  <div> 
      <h3 :style="{color}">GrandSon孙子组件</h3>

  </div>
</template>

<script lang="ts">
import { ref, reactive, defineComponent, inject } from 'vue'
export default defineComponent({
    setup(){
        //注入的操作
        let color = inject('color')



        return{
            color
        }
    }
})
</script>

当然vue3也可以直接绑定css的方法

<template>
  <button class="but" type="button" @click="count++">count is: {{ count }}</button>
  <span class="but"> {{ count }}</span>
 <div>
        
    </div>
   <div class="div">123456</div>
   <div v-for="item in list" ref="num"> 
{{item.name}}
   </div>
</template>
<script  lang="ts">

import { ref,onBeforeUpdate, onUpdated} from 'vue'

export default {
 
setup(){
// defineProps<{ msg: string }>()
const count = ref(100)
const color:string = 'red'
const font = {
  size:'20px', 
}
let list:any[] = [
  {
  name:'aa',
  id:1,
  age:14,
  },
  {
  name:'aa',
  id:2,
  age:14,
  },
  {
  name:'aa',
  id:3,
  age:14,
  },
]


  let itemRefs:any[] = []
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
     return {
      count,
      list,
      color,
      font,
    }
   
  }
  
}

</script>

<style scoped>
.but{
  color:v-bind(color);
  font-size: v-bind("font.size");
}
/* 想要他管用就把scoped注释 */
:root{
  --varColor:blue;
  /* 在vite里面支持的不是很好 */
  --initFn:()=>{
    console.log("123")
  }
}

.div {
  color:var(--varColor);
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>