vue3的创建使用

一、vue3

用vite创建vue3项目

• 注意node.js版本

• 创建一个文件夹

• 首先要 安装npm ： npm i

• 运行 npm run dev

• 新建了testView alt+ shift + enter

  

• 

• 运行js文件

  • cd .\ project\
  • node .\index.js\

二、vue3的特性(vue2和vue3的区别)

• 使用Proxy代替defineProperty实现数据响应式
• 重写DOM的实现和Tree-Shaking
• Composition API：组合式api
• 编译器的优化
• 打包大小减少41%
• 初次渲染快55%，更新渲染快133%
• 内存减少54%

三、setup

• 是一个专门用于组合式API的特殊钩子函数
• 所有的组合API函数都在此使用，只在初始化时执行一次
• 函数如果返回对象，对象中的属性或方法，模板中可以直接使用
• 在beforeCreate之前执行（一次），此时组件对象还没有创建

四、将非响应式数据转换为响应式数据

1、reactive

• 用于定义引用类型数据（数组或对象）的响应式。
• 将对象内部所有嵌套属性都转换为响应式的数据
• 基于 ES6 的Proxy 的基础上实现的
  特点：
• 响应式转换式“深层的”

var obj = reactive({
  age: '18',
  object: {
    age1: 20
  }
})
function add() {
  obj.age++
  obj.object.age1++
  console.log(obj)
}
<div> {{ obj }} </div>

• console.log(obj1 == obj) //true
  

2、ref

• 用于将数据转换为可响应式的引用对象
• js中操作数据: xxx.value

import { reactive, ref } from 'vue'
let age = ref(18)
function getAge() {
  age.value++ //注意.value
  console.log(age)
}

3、响应式 vs 非响应式

• **响应式对象：**逻辑层数据发生改变会影响视图层的变化
• **非响应式对象：**逻辑层数据发生变化不会影响视图层的变化

五、forceUpdate()、nextTick()

• this.$forceUpdate():强制页面刷新
• nextTick():在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

nextTick( () =>{ }) //元素发生改变时候重新执行一遍

六、计算属性和监听属性

1、计算属性 computed

• computed( () => {} ) 直接使用get
• computed( { get(){}, set ( ){ } } )

2、监听属性 watch

• 监听属性

watch(监听的属性，回调函数(newVal,oldVal),{
     deep:true,
     immediate:true})

• 监听多个

//监听属性 watch (监听的属性，回调函数(newVal,oldVal) )
watch([firstName, lastName], (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, { deep: true, immediate: true })

• watchEffect监听
  • 立即执行监听
  • 并且监听所有的响应式数据

watchEffect(()=>{
  console.log(11111)
  console.log(firstName.value)
})

3、watch和watchEffect的区别？

watch函数

• 与watch配置功能一致
• 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
• 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
• 通过配置deep为true, 来指定深度监视

watchEffect函数

• 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
• 默认初始时就会执行第一次, 从而可以收集需要监视的数据
• 监视数据发生变化时回调