vue3总结

一、创建vue3项目：基于vite

npm init vue@latest

二、vue3.x做了向下兼容（vue2.x）

三、setup内部写法

3.1、定义数据

​ 响应式数据：ref

​ 在使用时需要：x.value

​ 响应式数据：reactive

​ 不需要像ref那样 .value

​ reactive中 只能写对象或数组，ref内部可以写任意类型

3.2、vue2和vue3数据拦截的不同点

​ vue2.x ===> Object.defineProperty

​ vue3.x ===>new Proxy

3.3、toRefs

​ 结构 ==》响应式数据

let obj = reactive({
  name: "张三",
  age: 18,
});
let { name, age } = toRefs(obj);

3.4、computed

• // 写法一：
  let changeStr = computed(()=>{
     return '1' + str.value
   })
  

• // 写法二：
  let changeStr = computed({
    get(){
      return str.value
    },
    set(val){
      str.value = val
    }
  })
  

3.5、watch监听

• // 监听发某一个数据
  watch(str, (newval, oldval)=>{
    console.log(newval,oldval);
  })
  

• // 同时监听多个数据
   watch([str,num], (newval, oldval)=>{
     console.log(newval,oldval);
   })
  

• // 初始化监听
   watch([str,num], (newval, oldval)=>{
      console.log(newval,oldval);
    },{
      immediate:true
    })
  

• // 监听对象
  watch(obj,(newval, oldval)=>{
    console.log(newval, oldval);
  },{
    deep:true
  })
  

• // 监听对象的某一个key
  watch(()=>obj.m,(newval, oldval)=>{
    console.log(newval, oldval);
  },{
    deep:true
  })
  

• // 立即执行函数
  watchEffect(()=>{
     console.log(str.value);
  })
  

• // 监听路由
  let router = useRouter()
  watch(()=>router.currentRoute,(newval)=>{
    console.log(newval);
  },{
    immediate:true
  })
  

四、setup语法糖插件

​ 解决import{ref, reactive ,...}引入的问题

4.1、下载安装

​ npm i unplugin-auto-import -D

4.2、在 vite.config.js 中进行配置

// 引入插件
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue','vue-router']
    })
  ],
})

4.3、父传子

// 父
<template>
  <div>
    <List :msg="msg"></List>
  </div>
</template>

<script setup>
import List from '@/components/List.vue'
let msg = ref('这是父组件传过去的值')
</script>


// 子
<template>
   <div>
      List组件===》{{msg}}
   </div>
</template>

<script setup>
defineProps({
   msg:{
      type:String,
      default:11111
   }
})
</script>

4.4、子传父

// 子
<script setup>
let num = ref(100)
const emit = defineEmits(['changeNum'])

const btn = ()=>{
	emit('changeNum',num)
}
</script>


// 父
<template>
  <div>
    <List @changeNum='change'></List>
  </div>
</template>

<script setup>
import List from '@/components/List.vue'
const change = (n) => {
	console.log(n.value)
}
</script>

4.5、父子组件双向数据

// 父
<template>
  <div>
    <List v-model:num="num"></List>
  </div>
</template>


// 子
<script setup>
const props = defineProps({
  num: {
    type: Number,
    default: 111,
  },
});
const emit = defineEmits(['update:num'])
const btn = () =>{
   emit('update:num',200)
}
</script>

4.6、兄弟组件之间的传值

（1）插件下载安装

​ npm i mitt -S

（2）plugins /Bus.js

import mitt from 'mitt'
const emitter = mitt()
export default emitter

（3）A组件

emitter.emit("fn", str);

（4）B组件

let s = ref("");
emitter.on("fn", e => {
  	s.value = e.value
});

五、Teleport：传送

<teleport to=".main"></teleport>
<teleport to="#main"></teleport>
<teleport to="body"></teleport>

***必须传送到有dom的内容中【顺序】

六、动态组件

https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components

 <component :is="currentCom.com"></component>

七、异步组件

八、mixin混入

来分发vue组件中的可复用功能

• // mixin.js
  import {ref} from 'vue'
  export default function(){
     let num = ref(1)
     let fav = ref(false)
  
     let favBtn = ()=>{
        num.value += 1
        fav.value = true
        setTimeout(()=>{
           fav.value = false
        },2000)
     }
     return{
        num,fav,favBtn
     }
  }
  

• // 组件
  <template>
     <div>
        <h1>A组件</h1>
        {{ num }}
        <button @click="favBtn">{{fav ? '收藏中...':'收藏'}}</button>
     </div> 
  </template>
  
  <script setup>
  import mixin from "../mixins/mixin.js";
  let { num, fav, favBtn } = mixin();
  </script>
  

九、provide / inject：依赖/注入

// 提供：
let num = ref(100)
provide('changeNum',num)


// 注入：
<template>
    <h1>B组件</h1>
</template>

<script setup>
import { inject } from "@vue/runtime-core";

const bnum = inject('changeNum')
console.log('b组件',bnum);
</script>

十、Vuex

// state
let num = computed(() => store.state.num )

// getters
let total = computed(() => store.getters.total)

// mutations
store.commit('xxx')

// actions:
store.dispatch('xxx')

// modules:

// Vuex持久化存储

十一、Pinia

vuex和pinia的区别：

1. 支持选项式api和组合式api写法
2. pinia没有mutations，只有：state、getters、actions
3. pinia分模块不需要modules（之前vuex分模块需要modules）
4. TypeScript支持很好
5. 自动化代码拆分
6. pinia体积更小（性能更好）

pinia的使用：

https://www.xuexiluxian.cn/blog/detail/242b0ed71feb412991f04d448fc86636

pinia持久化存储：

https://www.xuexiluxian.cn/blog/detail/acebacd99612447e8c80dcf6354240f6

十二、设置代理解决跨域问题

https://www.xuexiluxian.cn/blog/detail/10a17f1fb1b04ea8b4166126c496fdc7