【vue3学习—day2】vue3部分细节问题，数据劫持，定义数据，插件安装

1.vite中 @ 的使用

与vue2不同，不能直接使用 @引入组件，需要进行一些相关配置，即在 vite.config.js里进行相关别名配置

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
// 使用@的别名路径
import {
  resolve
} from "path";
const pathResolve = (dir) => resolve(__dirname, dir);

export default defineConfig({
  plugins: [
    vue(),
  ],
  // 配置路径别名
  resolve: {
    alias: {
      "@": pathResolve("./src"),
    },
  },

})

2. vue3的代码风格

vue3是可以向下兼容的，也就是vue2的写法在vue3里都没问题，因此可以有一下几种方式

2.1 vue2的写法（data,methods,components…）

2.2 vue2+vue3的混合写法

2.3 纯vue3的写法

<template>
    <div>
        <h1 @click="getData">首页</h1>
    </div>
</template>

<script setup>
let str = "张三丰"
const getData = () => {
    console.log(str, "dskahdksa")
}
</script>

3.数据响应问题

3.1vue2数据响应失效怎么办

可以添加 this.$set(options,value) 再次尝试

3.2vue3如何解决相应问题

可以看到，下面的str 触发更改值，但是 实际展示的时候并没有变化，应该如何解决呢？

<template>
    <div>
        <h1 @click="getData">首页</h1>
        <h1>{{ str }}</h1>
    </div>
</template>

<script setup>
let str = "张三丰"
const getData = () => {
    str = "hello"
    console.log("str:", str)
}
</script>

1.ref()方法

<template>
    <div>
        <h1 @click="getData">首页</h1>
        <h1>{{ str }}</h1>
    </div>
</template>

<script setup>
import { ref } from 'vue';
let str = ref("张三丰")
const getData = () => {
    console.log("str:", str)
}
</script>

更改值

2.reactive()方法

<template>
    <div>
        <h1 @click="getData">首页</h1>
        <h1>{{ str.a }}</h1>
    </div>
</template>
<!-- 方法2：reactive -->
<script setup>
import { reactive } from 'vue';
let str = reactive({
    a: "张三丰"
})
const getData = () => {
    str.a = "hello"
    console.log("str:", str)
}
</script>

注意：reactive里面只能是对象或者数组形式，否则响应时效

4.vue2与vue3数据拦截不同

vue2.x ==> Object.defineProperty
vue3.x ==>new Proxy

vue2的数据劫持写法

<template>
    <div></div>
</template>
<script>
let obj = {
    a: "甲",
    b: "乙",
    c: "丙"
}

let newObj = {}
for (let k in obj) {
    Object.defineProperty(newObj, k, {
        get() {
            return obj[k]
        },
        set() {

        }
    })
}
console.log(newObj)
</script>

vue2的数据劫持

对比：多层数据
vue2（递归+循环）

vue3（递归不循环）

<template>
    <div></div>
</template>
<!-- vue3写法 -->
<script>
let obj = {
    a: "甲",
    b: "乙",
    c: "丙",
    os: {
        x: 23
    }
}

let newObj = new Proxy(obj, {
    get() {

    },
    set() {

    }
})
console.log(newObj)
</script>

vue3的性能总体提升很多

5.setup语法糖解决{ ref , reactive …}引入问题

5.1 下载安装

npm i unplugin-auto-import -D

5.2在vite.config.js里进行配置

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
// 使用@的别名路径
import {
  resolve
} from "path";
// 引入插件
import AutoImport from "unplugin-auto-import/vite"

const pathResolve = (dir) => resolve(__dirname, dir);

export default defineConfig({
  plugins: [
    vue(),
    // 配置插件
    AutoImport({
      imports: ["vue", "vue-router"]
    })
  ],
  // 配置路径别名
  resolve: {
    alias: {
      "@": pathResolve("./src"),
    },
  },

})