企业网站建设一条龙多少钱,惠州营销网站制作,网站建设乙方义务,asp网站时间代码一、vue3
用vite创建vue3项目 注意node.js版本 创建一个文件夹 首先要 安装npm #xff1a; npm i 运行 npm run dev 新建了testView alt shift enter 运行js文件 cd .\ project\node .\index.js\
二、vue3的特性(vue2和vue3的区别)
使用Proxy代替definePropert…一、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-ShakingComposition 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.ageobj.object.age1console.log(obj)
}
div {{ obj }} /divconsole.log(obj1 obj) //true2、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( () {} ) 直接使用getcomputed( { 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函数
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据默认初始时就会执行第一次, 从而可以收集需要监视的数据监视数据发生变化时回调
