Vue3
npm init vite
Vite与Webpack
- webpack打包是递归依赖,构建AST抽象语法树,再把抽象语法树转成浏览器可识别的代码
Vite通过劫持浏览器请求,将文件进行分解和整合,无需打包编译,速度很快。 - webpack使用NodeJS实现,Vite使用Go语言编写的esbuild预构建依赖,速度快至少10倍。
- 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");
}
······