vue2X与vue3X的区别（未完）

wxxmagical

已于 2022-02-08 16:39:26 修改

阅读量706

点赞数

文章标签：前端 vue.js vue

于 2022-02-07 17:28:24 首次发布

本文链接：https://blog.csdn.net/wxxmagic/article/details/122805024

版权

v-for 中的 Ref 数组

官网链接
新特性，在循环绑定ref的时候可以通过ref绑定一个函数，此时不会再用ref数组填充$refs

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

 data() {
    return {
      itemRefs: []
    }
  },

  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },

$attrs包含class&style

官网链接
2.x 行为
$ attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
$attrs 中的 attribute 将不再被自动添加到根元素中，而是由开发者决定在哪添加。但是class和style依旧在根组件上

3.x 行为
$attrs 包含了所有的 attribute，这使得把它们全部应用到另一个元素上变得更加容易了。

$children

官网链接

$ children 实例 property 已从 Vue 3.0 中移除，不再支持。
在 2.x 中，开发者可以使用 this.$ children 访问当前实例的直接子组件：
在 3.x 中，$ children property 已被移除，且不再支持。如果你需要访问子组件实例，我们建议使用 $refs。

自定义指令

官网链接
2.x 语法

<p v-highlight="'yellow'">以亮黄色高亮显示此文本</p>

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

3.x语法
然而，在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使钩子的目标事件十分相似。我们现在把它们统一起来了：

created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
componentUpdated → updated
beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
unbind -> unmounted

<p v-highlight="'yellow'">以亮黄色高亮显示此文本</p>

const app = Vue.createApp({})

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

与自定义元素的互操作性

官网链接
检测并确定哪些标签应该被视为自定义元素的过程，现在会在模板编译期间执行，且应该通过编译器选项而不是运行时配置来配置。

如果我们想要在 Vue 外部定义添加自定义元素 (例如使用 Web Components API)，则需要“指示”Vue 将其视为自定义元素。

在 Vue 3.0 中，此检查在模板编译期间执行。

定制内置元素
自定义元素规范提供了一种将自定义元素作为自定义内置元素的方法，方法是向内置元素添加 is attribute：

点击我!
在原生 attribute 于浏览器中普遍可用之前，Vue 对 is 这个特殊 attribute 的使用就已经在模拟其行为。但是，在 2.x 中，它将被解释为渲染一个名为 plastic-button 的 Vue 组件，这将阻碍上面所提到的自定义内置元素的原生用法。

在 3.0 中，我们将 Vue 对 is attribute 的特殊处理限制在了标签中。

在保留的 < component > 标签上使用时，它的行为将与 2.x 中完全相同；

在普通组件上使用时，它的行为将类似于普通 attribute：

<foo is="bar" />

2.x 的行为：渲染 bar 组件。
3.x 的行为：渲染 foo 组件，并将 is attribute 传递给它。

在普通元素上使用时，它将作为 is attribute 传递给 createElement 调用，并作为原生 attribute
渲染。这支持了自定义内置元素的用法。

<button is="plastic-button">点击我！</button>

2.x 的行为：渲染 plastic-button 组件。

3.x 的行为：通过调用以下函数渲染原生的 button

document.createElement('button', { is: 'plastic-button' })

使用 vue: 前缀来解决 DOM 内模板解析问题

提示：本节仅影响直接在页面的 HTML 中写入 Vue 模板的情况。在 DOM 模板中使用时，模板受原生 HTML 解析规则的约束。一些 HTML 元素，例如 < ul >、< ol >、< table> 和 < select > 对它们内部可以出现的元素有限制，以及一些像 < li >、< tr >、和 < option > 只能出现在特定的其他元素中。

2.x 语法
在 Vue 2 中，我们建议在原生标签上使用 is attribute 来绕过这些限制：

<table>
  <tr is="blog-post-row"></tr>
</table>

3.x 语法
随着 is 的行为发生变化，现在将元素解析为 Vue 组件需要添加一个 vue: 前缀：

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

按键修饰符

官网链接
非兼容：不再支持使用数字 (即键码) 作为 v-on 修饰符
非兼容：不再支持 config.keyCodes

<!-- 键码版本 -->
<input v-on:keyup.13="submit" />

<!-- 别名版本 -->
<input v-on:keyup.enter="submit" />

键码版本已经废弃；依旧可以使用别名版本来绑定键盘事件

建议对任何要用作修饰符的键使用 kebab-cased (短横线) 名称。

<!-- Vue 3 在 v-on 上使用按键修饰符 -->
<input v-on:keyup.page-down="nextPage">

语法的限制导致某些特定字符无法被匹配，比如 "、’、/、=、> 和 .。对于这些字符，你应该在监听器内使用 event.key 代替。
如下

 <input @keydown="keyDown" v-on:keyup.enter="enter"/>
 
	keyDown(event){
      console.log('event=========',event);
      //"="对应的key是Process
      if(event.key == "Process"){
          alert("keyDown=")
      }
    },

v-model

官网链接
v-model 双向数据绑定：value和@input两个在起作用
v-model只是一个语法糖
在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件中添加 model 选项：

或者通过v-bind.sync来进行操作

v-bind.sync类似自定义事件，只不过事件命默认定义为update:myPropName
也无需在组件调用出监听自定义事件如下

this.$emit('update:title', newValue)

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

可以写为

<ChildComponent :title.sync="pageTitle" />
update:title是是自定义事件命
title是子组件porp

下面是自定义事件的方式实现双向绑定

<my-input v-model="msg" @change2="change"></my-input>

change(val){
      console.log('val=========',val);
      this.msg = val;
},

子组件这样写

    <input type="text" :value="title" @input="changeSon">


  changeSon(val){
      console.log('this.title=========',val.target.value);
      this.$emit("change2",val.target.value)
    },
changeSon事件触发后定义change2事件，在组件调用处监听change2事件更新新值

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

若需要更改 model 的名称，现在我们可以为 v-model 传递一个参数，以作为组件内 model 选项的替代：

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：