vue2.0和3.0的区别

1. vue2和vue3双向数据绑定原理发生了改变

1. vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
2. vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下
defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数 组内部数据的变化。


2.在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

1. 从vue引入reactive
2. 使用reactive()方法来声名我们的数据为反应性数据
3. 使用setup()方法来返回我们的反应性数据，从而我们的template可以获取这些反应性数据

[color='''rgba(0, 0, 0, 0.749019607843137)''']


import { reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    return { state }
  }
}





3.默认项目目录结构也发生了变化： 移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

4. 2.0和3.0的生命周期对比

2.0生命周期	3.0生命周期
beforeCreate(组件创建之前)	setup(组件创建之前)
created(组件创建完成)	setup(组件创建完成)
beforeMount(组件挂载之前)	onBeforeMount(组件挂载之前)

mounted(组件挂载完成)	onMounted(组件挂载完成)
beforeUpdate(数据更新，虚拟DOM打补丁之前)	onBeforeUpdate(数据更新，虚拟DOM打补丁之前)
updated(数据更新，虚拟DOM渲染完成)	onUpdated(数据更新，虚拟DOM渲染完成)
--------	--------
beforeDestroy(组件销毁之前)	onBeforeUnmount(组件销毁之前)
destroyed(组件销毁之后)	onUnmounted(组件销毁之后)

5.vue3特点


Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）
作用: 聚合代码 & 逻辑重用





6.知识点


使用defineComponent 构建应用及绑定事件
使用setup(props,content)父子通信
使用 reactive 绑定数据
使用 ref ( torefs ) 绑定数据
使用 getCurrentInstance 获取当前实例化对象上下文信息
watch、watchEffect 数据监听




1.使用 reactive 绑定数据


<template>
  <div>
    <h1>使用 reactive 绑定数据</h1>
    <p>pw_state.msg</p>
    <p>pw_info</p>
    <p>
      <button @click="changeMsg">changeMsg</button>
    </p>
  </div>
</template>
<script>

// Hooks 编程，在 vue 中导入对应的函数方法，面向函数式进行编程
// Vue-composition-API 这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'test1',
  setup() {  // setup钩子函数
    // 使用响应式函数reactive构建proxy响应式对象state
    const state = reactive({
      msg: '时光'
    })
    console.log(state); // state对象是一个proxy拦截对象
    let info = 'hello'; // info是一个普通对象，修改后不会被proxy拦截，进而页面也不会动态更新
    const changeMsg = () => { // 在外边定义methods
      state.msg = '时光，你好'
      info = 'hello，你好'
    }
    return {  // 使用时，要把对象return出去，才能在template中使用
      state,
      info,
      changeMsg
    }
  }
})
</script>

————————————————
版权声明：本文为CSDN博主「星空之火@田兴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43638968/article/details/114260999