[JavaScript知识库]Vue3

Vue3

npm init vite

Vite与Webpack

1. webpack打包是递归依赖,构建AST抽象语法树,再把抽象语法树转成浏览器可识别的代码
   Vite通过劫持浏览器请求,将文件进行分解和整合，无需打包编译，速度很快。
2. webpack使用NodeJS实现，Vite使用Go语言编写的esbuild预构建依赖，速度快至少10倍。
3. webpack生态更加强大，插件丰富，Vite伴随Vue3刚刚诞生，还需要沉淀和版本迭代。

main.js发生的变化

import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')

index.html

vite通过html5原生的type=”module”属性来支持ES6的模块化语法

<script type="module" src="/src/main.js"></script>

子传父/父传子

<!-- 
  子传父：:list="gogo"
  1. 将子元素引入 ：import son from "./son.vue";
  2. 设置要传递的值 ：let gogo = [1, 2, 3];
  3. 将子元素放到明面上：<son :list="gogo"></son>
  4. 去子页面拿到父页面传来的值 ：props: ["list"],setup(props){。。。}
  5. 在子元素上写入<p>{{ 从父元素拿到的值 }}</p>
 -->
 <!-- 
   父传子：
   1. 将子元素引入 ：import son from "./son.vue";
   2. 设置要接收传递的标签：<son @newTodo="play"></son>
   3. 给父元素创建一个函数，获得的数据来自子元素：let play = (name) => {}
   4. 子元素设置触发标签 ：<button @click="play">你好</button>
   5. 子元素设置响应事件 ：  <button @click="play">你好</button>
  -->

<!-- 父组件 -->
<template>
    <!-- 允许有多个根标签 -->
  <div>
    <p>123</p>
    <son :list="gogo" @newTodo="play"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  setup() {
    let gogo = [1, 2, 3];
    let play = (name) => {
      alert("你好:" + name);
    };
    return {
      gogo,
      play,
    };
  },
  components: {
    son,
  },
};
</script>

<!-- 子组件 -->
<template>
  <p>123</p>
  <p>{{ gogo }}</p>
  <button @click="play">你好</button>
</template>

<script>
export default {
  props: ["list"],
  setup(props, context) {
    let gogo = props.list;
    // let plays = ;
    let play = function (name) {
      name = "李尚恒";
      context.emit("newTodo", name);
    };
    return {
      gogo,
      play,
    };
  },
};
</script>
<style scoped lang="scss"></style>

响应式数据之ref

• 创建一个普通的响应式数据

<template>
  <p>{{ a }}</p>
</template>

<script>
import { reactive, ref, toRefs } from "vue";

export default {
  setup() {
    var a = ref(123);
    console.log(a.value);
    a.value = 456;
    return {
      a,
    };
  },
};
</script>

<style scoped lang="scss"></style>

• 给某个标签或组件添加ref，可以获得该组件/标签

响应式数据之 reactive

<template>
  {{ obj.name }}--{{ obj.age }}
  <br />
  <input type="text" v-model="obj.name" />
  <input type="number" v-model="obj.age" />
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    var obj = reactive({
      name: "",
      age: "",
    });
    return {
      obj,
    };
  },
};
</script>
<style scoped lang="scss"></style>

计算属性computed

<!-- computed -->
<template>
  <input type="text" v-model="aaa" placeholder="原数据" />
  <p>{{ aaa }}</p>
  <p>{{ bbb }}</p>
</template>

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    return {
      aaa,
      bbb,
    };
  },
};
</script>
<style scoped lang="scss"></style>

监视器 watch

<script>
import { computed, ref, watch } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    watch(
      aaa,
      (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
      },
      { immdiate: true, deep: true }
    );
    return {
      aaa,
      bbb,
    };
  },
};
</script>

监视器 watchEffect

<script>
import { computed, ref, watch, watchEffect } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    watch(
      aaa,
      (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
      },
      { immdiate: true, deep: true }
    );
    // 
    watchEffect(() => {
      console.log(aaa.value, bbb.value);
    });
    return {
      aaa,
      bbb,
    };
  },
};
</script>

钩子函数

provide/inject

<!-- 父组件 -->  
setup() {
    provide("color", "color : red");
	}

<!-- 子孙组件 -->
<p :style="colors">XXX</p>
······js代码
setup() {
let colors = inject("color");
	}
······