木灵鱼儿

木灵鱼儿

阅读:188

最后更新:2022/08/20/ 0:30:32

vue3 transition、watch、挂载api的变化

transition

动画的变化就是vue3调整了一下动画类名,原来vue2是:

.v-enter{
  opacity: 0;
}

.v-leave{
  opacity: 1;
}

这两个在vue3中改为:

.v-enter-from{
  opacity: 0;
}

.v-leave-to{
  opacity: 1;
}

其相关属性也对应发生了变化:

  1. leave-class被重命名为 leave-from-class(可以写成 leaveFromClass在渲染函数或 JSX 中)
  2. enter-class被重命名为 enter-from-class(可以写成 enterFromClass在渲染函数或 JSX 中)

watch

watch不再支持通过监听string类型,且这个值可以xxx.xx的形式,这种方式的watch监听。

vue3中统一改为函数返回:

this.$watch(()=> this.foo.bar,(newVal,oldVal)=> {
  console.log(newValue, oldValue);
})

挂载api发生变化

在vue2时,如果我们new Vue声明的组件,且$mount挂载到#app上,这个组件上存在template选项,那么template选项的html内容会完全替换#app

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

// or
const app = new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.$mount('#app')

替换前:

<body>
  <div id="app">
    Some app content
  </div>
</body>

new Vue实例化后进行替换:

<body>
  <div id="rendered">Hello Vue!</div>
</body>

在vue3的时候,将不会直接替换,而是使用innerHTML去渲染#app内的元素。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.mount('#app')
<body>
  <div id="app" data-v-app="">
    <div id="rendered">Hello Vue!</div>
  </div>
</body>

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 188

相关文章