Vue3：移除的特性

1、$children

• vue2中可以通过组件属性$children获取子组件的组件对象 　　用法：this.$children,如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；

var inputDom = this.$children[0].$el.querySelectorAll(".el-input__inner")[0];

• vue3中建议使用ref属性来操作子组件 　　用法：首先你的给子组件做标记。

<firstchild ref="one"></firstchild>

　　然后在父组件中，通过this.$refs.one就可以访问了这个子组件了，包括访问自组件的data里面的数据，调用它的函数

2、native事件

NativeTest.vue

<template>
    <div>
    <button>按钮</button>
    </div>
</template>

• vue2中可以通过native事件修饰符，在一个组件的根元素上直接监听一个原生事件。 　　如果没有使用该修饰符，那么vue会认为这是一个自定义事件，必须通过自定义事件的方式进行

<NativeTest @click.native="handler"/>

• vue3
  • 组件调用标签上注册的事件，默认都会当做原生的事件进行触发
  • 如果希望组件调用标签上所注册的自定义事件，可以通过emits来进行声明

//1
<NativeTest @click="handler"/>
//2
export default{
    //此处声明过的事件，会认为是自定义事件，必须通过自定义事件的方式进行触发,即使名称冲突也不会通过系统事件的方式触发该事件
    emits:['click'];
}

3、filter过滤器

• vue2：对视图中即将输出的数据进行预处理 　　只能在插值表达式和v-bind指令中使用

{{待处理数据|过滤器名称}}

　　1.全局过滤器

vue.filter('过滤器名称',function(data){
    //必须返回处理结果
})

　　2.私有过滤器

export default{
    filters:{
         //data：系统自动注入，待处理的数据
         过滤器名称:function(data){
             //必须返回处理结果
         }
    }
}

• vue3中建议使用自定义方法或者computed计算属性来代替过滤器

4、vm.$set(Vue.set)

• vue2：解决通过vm.$set数组下标方式向数组或者对象中添加元素，视图不更新的问题

vm.$set(目标数组,数组下标,数组元素);
vm.$set(目标对象,属性名,属性值);

• vue3：利用的是ES6的proxy，对数据响应式进行一个数据的代理。 Vue3 中 新出的 reactivity API: reactive、readonly、ref、computed
  如果想要让一个对象变为响应式数据，可以使用reactive或ref

setup(){
     const arr= reactive(["a"],["b"],["c"]);
     return { arr }
},
mounted(){
    this.arr[1] = "d";
}

5、vm.$destory

• vue2：可以通过实例方法vm.$destory销毁组件
• vue3：
  • destroyed 生命周期选项被重命名为 unmounted
  • beforeDestroy 生命周期选项被重命名为 beforeUnmount