Vue3

搭建工程

1、 vue-cli （升级后的）
vue create demo（内部使用webpack，打包过程太慢）
2、构建工具脚手架（vite）
可以搭建react。。。
npm init vite-app demo
引用文件的时候除了.js不用加后缀

main.js 区别

vue2

new Vue(options).$amount()

vue3

createApp(App).mount("#app")

vue3中没有Vue module 导出

this区别

vue2中， this指向 vue实例
vue3中， this指向 Proxy

composition api(※)

高内聚， 将代码整合到一起，不像之前的option api 代码分布在不同的地方（data, methods,…）
mixin 是扁平化的， 多个聚合不能关联

setup

1、 在所有生命周期钩子函数之前调用
2、 this 为 undefined
3、 没法进行双向绑定值， 所以count变量在++ 之后无法进行重新渲染

ref 进行双向绑定重新渲染

<template>
  <button @click="increase">{{count}}</button>
</template>

<script>
export default {
  setup() {
    let count = 0;
    const increase = () => {
      count ++;
      console.log(count)
    }
    return {
      count,
      increase,
    }
  }
}
</script>

ref(达到响应式)

let count = ref(0);

返回具有响应式的数据
※ ref是一个对象， 但是在模板中同各国代理对象，返回的是对象的value属性值

<template>
  <button @click="increase">{{count}}</button>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    let count = ref(0);
    console.log(count)
    const increase = () => {
      count.value ++;
      console.log(count.value)
    }
    return {
      count,
      increase,
    }
  }
}
</script>

所以在setup中， count是一个对象， 在实例代理中 count是一个 count.value
在 实例中变量命名一定要countRef， 这样好区分， 操作的是countRef.value

watchEffect (监控副作用)

用于监听响应式数据的变化
响应式数据会作为依赖

watchEffect(() => {
localStorage.setItem(countRef.value);
})

生命周期钩子函数

import { onMounted, onUnmounted } from "vue";
// 组件挂载完成的生命周期函数
onMounted(() => {})
// onUnmounted 组件销毁过后的生命周期函数

计算属性 computed

写法一

computed({
 get() {},
 set() {}
})

写法二
如果只用到get属性
可以

const value = computed(() => {})

vite 与 webpack

1、 webpack 需要先进行打包，再启动服务器，请求服务器是直接把打包结果给过去
2、 vite不需要打包，在请求服务器时，请求哪个模块就对这个模块进行实时编译。
3、 vite利用的时ESModule，现代浏览器本身支持ESModule，会自动像依赖的模块发送请求，因此速度非常快。当改动一个模块后，只需要重新清秀这个模块就行。不能使用CommonJS
<script type="module" src="/src/main.js"></script>
4、vite 自带的打包工具 rollup

效率的提升

1、 静态元素节点和静态属性的提升
vue2

render() {
		createVNode("h1", null, "Hello World")
}

vue3

const hosted = createVNode('h1',null, 'Hello World')
function render() {//直接使用 hosted}

这样节点就只被创建一次
2、预字符串化
静态节点处理成字符串
3、缓存事件处理函数（_catch）

※ 对Vue3数据响应式的理解

都是在beforeCreate之后，created之前完成响应式的
vue3不再使用Object.defineProperty的方式实现数据响应式，而是通过Proxy代理， Proxy效率本身就比Object.defineproperty高，而且不需要递归遍历所有属性，而是直接得到一个Proxy，动态访问数据，当访问莫以恶属性的时候，动态的获取和设置，提升了在组件初始阶段的相率。
同时，由于Proxy可以监控到成员的i年增和删除，因此，在Vue中新增删除成员的时候都会触发重新渲染。