一、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++ //注意.valueconsole.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函数
- 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
- 默认初始时就会执行第一次, 从而可以收集需要监视的数据
- 监视数据发生变化时回调
