1.mixin

作用:定义一些公共的数据和方法,在多个组件都可以进行使用

1.1mixin初体验

    // 定义一个Mixin对象(可以放任何东西)const myMixin = {data() {return {msg: "张三",}},methods: {hello() {alert("hello,world")}},}const app1 = Vue.createApp({// 把Mixin混入实例mixins: [myMixin],template: "#test-box"})app1.mount('#root1');const app2 = Vue.createApp({// 把Mixin混入实例mixins: [myMixin],template: "#test-box"})app2.mount('#root2');

1.2mixin使用

1. 多种数据会合并,app实例里的data,methods…优先级高于mixin里的
2. 先执行mixin里的钩子,在执行app里的钩子
3. 可以通过配置来决定使用哪个里面的数据(谁在前优先使用)

 const myMixin = {msg: "mixin里的自定义属性"}

 const app1 = Vue.createApp({mounted() {// 获取mixin里的属性console.log(this.$options.age);},methods: {hello() {alert("你好啊");}},msg: "app里的自定义属性",mixins: [myMixin],template: "#test-box"})

    // 通过配置来决定使用哪个里面的数据(谁在前优先使用)app1.config.optionMergeStrategies.msg = (mixinVal, appValue) => {return mixinVal || appValue}

2.自定义指令

1. 自定义全局指令

   app.directive('focus', {mounted(el) {el.focus();}})

4. 自定义局部指令

   const highlight = {beforeMount(el, binding, vnode) {el.style.background = binding.value}}const app  = Vue.createApp({// directives-->用来挂载局部指令directives: {/* 'highlight': {beforeMount(el, binding, vnode) {el.style.background = binding.value}} */'highlight': highlight},})

<template id="test-box"><div><input type="text" placeholder="请输入姓名" v-focus><p v-highlight="'yellow'">以亮黄色高亮显示此文本</p></div>
</template>

3. 一些常用的钩子

const focus = {// 一些常用的钩子mounted(el) {el.focus();console.log("mounted");},created(el, binding, vnode, prevVnode) { console.log("created"); }, // 新增beforeMount() { console.log("beforeMount"); },beforeUpdate() { console.log("beforeUpdate"); }, // 新增updated() { console.log("updated"); },beforeUnmount() { console.log("beforeUnmount"); }, // 新增unmounted() { }}

5. 传递数据的自定义指令

<template id="test-box"><div><!-- 传递posData的数据 --><div class="box" v-fixed:pos="posData">盒子组件</div></div>
</template>

    const fixed = (el, binding, vnode, prevVnode) => {el.style.position = 'fixed';el.style.left = binding.value.left + 'px';el.style.top = binding.value.top + 'px';}const app = Vue.createApp({data() {return {posData: {top: 100,left: 200,}}},// 挂载局部指令directives: {'fixed': fixed},template: '#test-box',}).mount("#root")

4.teleport传送门

使用场景:一个组件需要覆盖在任意位置时

        <!-- 传送到任意位置 --><teleport to='#app'><div class="mask" v-show="isShow">{{msg}}</div></teleport>

5.setup的使用

当项目变大时，一个方法（methods）、一个数据（data）、一张表，相同的逻辑代码出现在多个地方，给维护带来很大的不便。 setup的出现就是为了解决这个问题:

1. setup在挂载之前就被执行了,不能调用生命周期函数
2. 主要用于取代data里的选项和methods里的一些方法
3. setup不能调用this,没有被挂载

<template id="test-box"><div><h1>{{msg}}</h1><button @click="log">点击</button><button @click="deal">处理</button></div>
</template>

    const app = Vue.createApp({setup(props, context) {return {msg: "张三",log: () => {alert("hello");}}},data() { },methods: {// 选项里可以调用setup里的东西,setup不能调用选项里的东西deal() {console.log(this.$options.setup());}},template: "#test-box",}).mount("#root")

6.ref的使用

ref:让基础类型的数据具备响应式(可以在控制台直接修改)

    const app = Vue.createApp({// setup不具备响应式特点setup(props, context) {// 1.从Vue里引入refconst { ref } = Vue;// 2.通过代理proxy({value:"张三"})let msg = ref("张三");// 3.修改ref需要通过value来修改setTimeout(() => {msg.value = "李四";}, 2000);return {msg}},template: `<h1>{{msg}}</h1><button @click="deal">点击</button>`,methods: {deal() {console.log(this.msg);}}}).mount("#root")

7.reactive的使用

reactive:让引用类型的数据具备响应式

<template id="test-box"><div><h2>姓名:{{personObj.name}}</h2><h2>年龄:{{personObj.age}}</h2><h2>{{personArr}}</h2></div>
</template>

    const app = Vue.createApp({setup(props, context) {let { reactive } = Vue;let personObj = reactive({name: "张三",age: 18})let personArr = reactive(["Vue", "React", "Angular"]);setTimeout(() => {personObj.name = "李四";personArr[0] = "hello"}, 2000);return {personObj,personArr}},template: "#test-box",}).mount("#root")

8.readonly的使用

readonly,只读属性不能修改

<template id="test-box"><div><h2>{{personObj.name}}</h2><h2>{{personObj.age}}</h2></div>
</template>

    const app = Vue.createApp({setup(props, context) {// 1.引入readonly,只读属性不能修改const { readonly } = Vue;let personObj = readonly({name: "张三",age: 18});setTimeout(() => {personObj.name = "李四";personObj.age = 20;}, 2000);return {personObj}},template: "#test-box"}).mount("#root")

9.toRefs的使用

解构出来的数据就不具备响应式,通过toRefs解决

<template id="test-box"><div><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2></div>
</template>

    const app = Vue.createApp({setup(props, context) {let { reactive, toRefs } = Vue;let personObj = reactive({name: "张三",age: 18})setTimeout(() => {personObj.name = "李四";personObj.age = 20;}, 2000);// 解构出来的数据就不具备响应式,通过toRefs解决/* proxy({name: "张三",age: 18})转化为name:proxy({value:"张三"})sex:proxy({value:18})            */const { name, age } = toRefs(personObj);return {name, age}},template: "#test-box",}).mount("#root")

10.toRef的使用

针对可选项取的时候,可以用toRef

<template id="test-box"><div><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>性别:{{sex}}</h2></div>
</template>

    const app = Vue.createApp({setup(props, context) {let { reactive, toRefs, toRef } = Vue;let personObj = reactive({name: "张三",age: 18})let { name, age } = toRefs(personObj);// 针对可选项取的时候,可以用toRef// 少了这行代码就会sex is not definedlet { sex } = toRef(personObj);setTimeout(() => {name.value = "李四";age.value = 20;sex.value = "男"}, 2000);return {name, age, sex}},template: "#test-box",}).mount("#root")