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>

钩子函数

Vue2 Vue3
beforeCreate setup
created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destoryed onUnmounted
activated onActivatide
deactivated onDeactivatide
errorCaptured onErrorCaptured
on

provide/inject

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

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

上一篇:MySQL两步删除多个同名前缀(后缀)的表(已经260000张表删除的实战)


下一篇:delphi中Tstringlist分割字符串的用法