vue2和vue3的区别【持续更新】

目录

内部指令

组件之间通信

计算属性computed

watch

生命周期钩子

nextTick

---

vue有非常棒的官方文档，基本上看了就会用，其实没有再写博客的必要。因为最近在开发vue3的项目，所以初衷是为了系统性的归纳一下常常用到的内容，作为总结提炼的同时也和大家一起分享...

vue3官方文档：简介 | Vue.js

内部指令

vue2:

v-text	更新元素的 textContent。
v-html	更新元素的 innerHTML。
v-show	根据表达式之真假值，切换元素的 display CSS property。
v-if	根据表达式的值的 truthiness 来有条件地渲染元素。
v-else-if	表示 v-if 的“else if 块”。可以链式调用。
v-else	为 v-if 或者 v-else-if 添加“else 块”。
v-for	基于源数据多次渲染元素或模板块。
v-on	绑定事件监听器。缩写是  @。注意了解修饰符的使用。
v-bind	动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。缩写是 : 。注意了解修饰符的使用。
v-model	在表单控件或者组件上创建双向绑定。注意了解修饰符的使用。
v-slot	提供具名插槽或需要接收 prop 的插槽。缩写是  #。
v-pre	跳过这个元素和它的子元素的编译过程。
v-cloak	这个指令保持在元素上直到关联实例结束编译。
v-once	只渲染元素和组件一次。

vue3:

v-memo	3.2+。缓存一个模板的子树。在元素和组件上都可以使用。
v-bind	修饰符：.prop和.attr调整。
v-on	修饰符：不再支持使用数字 (即键码) 作为 v-on 修饰符，不再支持 .keyCodes

组件之间通信

vue2:

vm.$props	父组件传值给子组件，子组件使用props进行接收。
vm.$emit	vm.$emit( eventName, […args] )。触发当前实例上的事件。附加参数都会传给监听器回调。子组件传值给父组件。
vm.$parent、vm.$children和vm.$root	组件中可以使用 $parent 和 $children 获取到父组件实例和子组件实例，进 而获取数据。
vm.$attrs和vm.$listeners	可以通过 v-bind="$attrs" 和v-on="$listeners"传入内部组件。如：在对一些组件进行二次封装时可以方便传值。
vm.$refs	一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例，直接获取数据。
Vuex	使用 Vuex 进行状态管理。
EventBus	EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件。跨组件触发事件，进而传递数据。
provide / inject	这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
浏览器缓存	例如 localStorage。

vue3:

Props

emit

# 注：官方文档说defineProps 和 defineEmits 都是只能在

组件B:

localStorage

这个兄弟不归vue管，没有什么你的我的，用起来也比较简单，存取操作。

Window.localStorage - Web API 接口参考 | MDN只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

计算属性computed

// html
{{ total(3) }}
测试元素
// js
computed: {
    total() {
        return function (n) {
            return n * this.num
        }
    },
    isShow: function() {
        return this.role === 'admin' && this.age > '18'
    }
}


// html
{{ total(3) }}
测试元素
// js

watch

watch: {
    formData: {
        handler(newForm, oldForm) {
            console.log(newForm)
        },
        immediate: true,
        deep: true
    }
}

生命周期钩子

我们可以使用生命周期钩子在组件各个生命阶段添加逻辑，如常见的onMounted。

vue2图示：Vue 实例 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

vue3图示：生命周期钩子 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/essentials/lifecycle.html

生命周期钩子：

组合式 API：生命周期钩子 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/api/composition-api-lifecycle.html

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy-> onBeforeUnmount
• destroyed-> onUnmounted

nextTick

data(){
    return {
        visible: false
    }
}
// 直接使用
this.$nextTick(() => {
    // 执行操作
    this.visible = true
    this.getData()
})





官方：
const count = ref(0)
async function increment() {
  count.value++
  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0
  await nextTick()
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}

结语：才学疏浅，有写错或者漏写的地方 还望指正，一起持续更新，不断打磨， 感谢~