这是我参与更文挑战的第4天，活动详情查看更文挑战

这篇文章主要分享之前文章没有提及的vue3新增特性，修改，删除的一些细碎知识点，详细可了解vue3官方文档

组件v-model支持参数

在Vue2.x时，我们要想给子组件传值，还得单独传入。Vue3.x直接以v-model:xxx形式传入参数，并且配合修饰符.sync进行数据同步更新

组件支持多个v-model

以前组件上只能写一个v-model，现在在vue3中v-model可以在书写多个，再也没有一个的限制了

Setup的this指向问题

在之前vue2中使用选项式API，在data中声明变量和存放数据，在methods中书写方法，可以使用this来在methods中调用data的中存放的东西。而现在在vue3中使用的是组合式API，会在setup中统一编写，由于不能在setup函数中使用data、methods，为了避免使用Vue出错，所以把setup函数中this修改为了undefined

<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App',
  setup() {
    console.log(this); // undefined
  }
}
</script>
复制代码

函数参数

props

接收组件传递过来的所有数据，并且都是响应式的。

<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App',
  props: {
      title: {
          type: String
      }
  },
  setup(props) {
    console.log(props.title)
  }
}
</script>

复制代码

注意一点，props数据不能使用解构，否则响应式数据失效

<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App',
  props: {
      title: {
          type: String
      }
  },
  setup({ title }) {
    console.log(title) // 这里响应式数据将失效
  }
}
</script>

复制代码

context

该参数提供一个上下文对象，从原来的2.x中选择性的暴露了一些属性。

• attrs
• slots
• emit

<template>
  <div>XMJ</div>
</template>
<script>
export default {
  name: 'App',
  props: {
      title: {
          type: String
      }
  },
  setup(props, { attrs, slots, emit } ) {
    console.log(attrs) 
  }
}
</script>

复制代码

上面，attrs和slots都是内部组件实例上对应项的代理，可以确保在更新后仍然还是最新的值。所以这里可以使用解构语法。

返回值

可以将setup函数返回值渲染到页面上。但前提是，setup返回值必须是一个对象，否则返回其它值则渲染无效。

Readonly

该方法接收传入一个对象，默认是只读功能，是深层对象只读，不管嵌套多少层的属性都是只读状态。

WatchEffect

该方法接收一个函数并且立即执行，并当该函数里的变量变更时，重新执行该函数。该方法无法获取到原值，只能是改变之后的值。

import { ref, watchEffect } from "vue"
export default {
 name: 'test',
  setup() {
    let name = ref("XMJ");
    let age = ref(23);
    watchEffect(() => {
        name.value; // 监听name
        age.value;  // 监听age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() => {
        name.value = "前端"
    }, 5000)

    setTimeout(() => {
        age.value = 18
    }, 1000)
  }
}
</script>

复制代码

如果要监听哪个值，需要在该函数里写出来，否则监听无效

取消监听

有时候我们想在触发一定的条件后取消监听。这时可以执行watchEffect的返回值。

import { ref, watchEffect } from "vue"
export default {
 name: 'test',
  setup() {
    let name = ref("XMJ");
    let age = ref(23);
    let stop = watchEffect(() => {
        name.value; // 监听name
        age.value;  // 监听age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() => {
        name.value = "前端"
    }, 5000)

    setTimeout(() => {
        age.value = 18;
        setTimeout(stop, 300)
    }, 1000)
  }
}
</script>
复制代码

Watch

watch等同于Vue2.x中的this.$watch，watch需要监听特定数据，默认情况是懒执行，也就是只有当数据发生变化时才执行第二个参数函数。
对比WatchEffect ，Watch允许我们

• 懒执行函数
• 更明确哪些状态改变触发监听器
• 可以监听获取到变化前后的值

Provide && Inject

该方法和Vue2.x的 provide、inject一样的。但是Vue3新特性这俩方法只能在setup中使用。

• Provide：接收2个参数，第一个key值，第二个value值，进行传递
• Inject：接收2个参数，第一个是provide的key值，默认第二个参数可选，可以设置默认值(当找不到key值，设置一个默认值)

isReadonly isRef isReactive

• isReadonly：用于检测该数据是不是可读数据。返回一个Boolean类型
• isRef：用于检测该数据是不是ref响应式数据。返回一个Boolean类型
• isReactive：用于检测该数据是不是reacttive响应式数据。返回一个Boolean类型

复制代码

移除过滤器filters

在Vue3.x中移除过滤器，不在支持。建议使用computed去替代。贴一个官网例子

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>
复制代码

不再限制Template一个根节点

Vue3.x中将不在限制模板中只有一个根节点，根组件可以任意多个元素

自定义v-model修饰符

Vue3.x中，添加了可以自定义修饰符，如Api提供的内置方法.trim，新特性我们也可以自定义啦。下面就来演示一下写一个转换字符串大写的修饰符

特别需要注意一点：如果你的v-model参数值为str，那么组件里面接收的值，全部为str开头，如：props里面的 strModifiers，str

废弃on，off，once实例方法

Vue3.x中 $on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。

<script>
	created() {
        console.log(this.$on, this.$once, this.$off) // undefined undefined undefined
	}
</script>
复制代码

自定义指令更改

在Vue3.x中自定义指定写法稍有更改，看下列。

• bind –> beforeMount 指令绑定到元素后发生。只发生一次
• inserted –> mounted 元素插入到父DOM后发生
• beforeUpdate: Vue3.x新添加的，这是在元素更新之前调用，
• componentUpdated –> updated
• beforeUnmount : Vue3.x新添加的，将在卸载元素前调用

–unbind–> unmounted

最后

vue3基本以及学习完毕，改动的东西从使用上来说并不是很大，但是底层代码构建却是从新编写的，学习并更新学习经历文章不易，希望看完的小伙伴可以点个