vue3的学习（四）

vue3相较于vue2拥有很大的升级与不同

前文：

vue3的学习（一）

vue3的学习（二）

vue3的学习（三）

这里继续记录vue2与vue3的不同与区别

全局组件注册：

在vue3中，由于不再使用实例来进行方法，因此在全局组件的形式上，也略有区别，但主要是在引入方式上，主要代码区别不大

代码：

import { createApp, h} from 'vue'//引入方法
import App from './App.vue'

let app=createApp(App)

//前置操作：先进行组件暴露，在一个文件中引入，然后使用export default{}的形式暴露
再在main.js中进行循环注册


// 引入公共组件
import vCommon from "./common/index.js"//这个文件就是集中暴露的文件
// 遍历并注册全局组件
for(let k  in vCommon){
    app.component(k,vCommon[k])
}





//挂载
app.mount('#app')

为了方便对比，这里放上vue2的全局注册方式

// vue2注册方式

// 先引入   Vue 构造函数（这一步我省略了）
//再引入集中暴露文件
import vFoot from "./common/vFoot.vue"
//注册
Vue.component("vFoot",vFoot)

关于vue3中的过滤器说明：

在vue3中，不再支持过滤器，也就是说，过滤器被直接移除了，因为官方认为过滤器完全可以让开发者自己写一个函数进行数据处理，没有必要专门做一个语法，过滤器的存在显得过于鸡肋

使用函数生成组件

通过函数的方式定义组件，与正常的组件相比它没有状态以及生命周期函数，它目前的作用不多，同样的东西在react中很有用，可能是作者单纯的搬过来准备以后添加更多实装功能

代码:

// 引入h  h是固定的方法
import { h } from "vue";

export default function(){
    return h("div",{class:"box",style:{color:"red"}},"我是div")
}

使用方式：与正常组件一致，先引入，再以标签的形式写到页面上即可

动态ref属性

说明：在vue2中，ref的属性可以直接获取当前元素，而循环元素会返回一个数组；在vue3中，不同之处在于作者希望开发者能够自由选择是否获取数组，然后手动的去对这个数组进行维护

代码：

export default {
    data(){
        return {
            list:[1,2,3,4,5],//要循环的数据
            opp:[]//创建一个空数组
        }
    },
    methods:{
        op(el){
            // el参数是循环的每一个元素
            // vue3希望我们手动的去维护一个数组 想用的时候才用

            this.opp.push(el)//循环填入空数组，这个空数组我们可以随意进行操作
            console.log(this.opp);//[1,2,3,4,5]
        }
    }
}