Vue2迁移到Vue3变化

v-for 中的Ref

• vue2：将所有的引用放到一个数组中
• vue3: 可以给ref绑定一个灵活的函数，函数

<div v-for="item in list" :ref="setItemRef"></div>

data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },

$attrs包含class&style

• vue2中的attrs中不包含style、class，当使用inheritAttrs:false时，class、style任然会显示再子组件根元素上
• vue3中包含所有属性

父组件

<my-component id="my-id" class="my-class"></my-component>

子组件

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

vue2现实情况

<label class="my-class">
  <input type="text" id="my-id" />
</label>

vue3显示情况

<label>
  <input type="text" id="my-id" class="my-class" />
</label>

$children移除

vue3不再支持,建议使用$refs

自定义指令

• vue2

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})

• vue3

app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})

---

定制内置元素

vue3的is属性只被保留在<component>标签中，将所有非针对<component> 标签的 is 用法更改为 <component is="..."> (对于 SFC 模板) 或为其添加 vue: 前缀 (对于 DOM 内模板)

    <button is="vue:hello-world">213213</button>

Data options

vue3中data声明只能使用function，且在mixin或者extend中，合并data时，是浅层次的
e.g:
mixins

export default {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}

组件代码

 export default {
    mixins: [Mixin],
    data() {
      return {
        user: {
          id: 2
        }
      }
    },
    mounted() {
      console.log(this.user);
    },
  }

vue2结果

vue3结果

Proxy {id: 2}

emits options

vue3中添加了emitsoptions，用于记录一个组件触发的事件

函数式组件

vue3可以使用h函数创建函数式组件

  // 写法1
    render() {
      return h('h2', {
        class: 'son'
      }, "222")
    },

    // 写法2
    setup() {
      return () => {
        return h('h2', {
          class: 'son'
        }, "333")
      }
    }

全局API

• 原有全局配置都在Vue上，不同app共享同一个Vue副本
• vue3，给到一个新的全局api createApp，不同app配置可以可以分开

import {
  createApp
} from 'vue'
import App from './App.vue'
import App2 from './App2.vue'

const app = createApp(App)
const app2 = createApp(App2)

console.log(app);

app.directive("highlight", {
  beforeMount(el, binding) {
    el.style.background = binding.value
  }
})

/***
 * 不同app挂在不同dom，配置不同环境
 * 而不会污染全局
 * */ 
app.mount('#app')
app2.mount("#app2")

全局API tree-shaking

使用全局API,只有用到的代码才会进行打包

v-on.native

vue2默认只能通过子组件this.$emit让父组触发事件, native可以将父组件的监听添加到子组件的根组件上
vue3默认就会把父组件的点击事件传递到子组件的根元素上,但是当使用inherited:false时,将会绑定到v-bind="$atts"的元素上

v-model

VUE2

 <hello-world v-model="message"></hello-world>

组件上使用v-model相当于一下

    <hello-world :value="message" @input="message=$event"></hello-world>

---

想要修改事件的名称可以在子组件上使用modeloptions

<template>
  <div>
    <input type="text" :value="message" @input="$emit('change',$event.target.value)" />
  </div>
</template>
<script>
  import Mixin from '../mixins.js'
  export default {
    model: {
      prop: "message",
      event: "change"
    },
    props: ['message'],
  }

或者使用v-bind.sync
父组件

    <hello-world :farMessage.sync="message"></hello-world>

子组件

    <input type="text" :value="farMessage" @input="$emit('update:farMessage',$event.target.value)" />

VUE3

    <hello-world v-model:farMessage="message"></hello-world>

相当于

    <hello-world :farMessage="message" @update:farMessage="message=$event"></hello-world>

且v-model可以加.修饰符

    <hello-world v-model:farMessage.nameBig="message"></hello-world>

v-if和v-for优先级

• vue3中v-if优先级高于v-for
  vue可以将v-for写在template中

 <template v-for='item in info'>
        <li v-if="item!='cba'">{{item}}</li>
 </template>