公司网站开发制作,备案中的网站,建设厅注册中心网站,wordpress添加搜索引擎使用Vue-cli创建 使用vite创建 Composition API 组合API
setup
1.Vue3中的一个新的配置项,值为一个函数
2.可以将组件中所用到的数据,方法等配置在setup中.
3.setup函数的两种返回值 3.1若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用. 3.2若返回一个渲染函数…使用Vue-cli创建 使用vite创建 Composition API 组合API
setup
1.Vue3中的一个新的配置项,值为一个函数
2.可以将组件中所用到的数据,方法等配置在setup中.
3.setup函数的两种返回值 3.1若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用. 3.2若返回一个渲染函数,则可以自定义渲染内容.
注意:Vue2.0配置(data,methos,computed,...)中可以访问到setup中的属性,方法.但在setup中不能访问(data,methos,computed,...).如果有重名,setup优先
执行时机
在beforeCreate生命周期前执行一次this是undefined
setup的参数
props值为对象包含父组件传递过来且组件内部生命接收了的属性。 export default {props:[name,id],emits:[事件名称],setup(props,context){// props:{name:,id:}console.log(props)}
} context:上下文对象 attrs:值为对象包含父组件传递过来但没有在props配置中声明的属性相当于Vue2的this.$attrs.slots:收到的插槽内容相当于Vue2的this.$slots.Vue3中的具名插槽要用v-slot:nameemit分发自定义事件的函数相当于Vue2的this.$emit.(需要再emits配置中声明)
ref函数
定义一个响应式数据
const xxx ref(initValue)
创建一个包含响应式数据的引用对象(RefImpl)
JS中操作数据:xxx.value
模板中读取数据不需要.value
备注:
接收的数据可以是:基本数据类型,也可以是对象类型基本数据类型:响应式依然是用Object.defineProperty()的get与set完成的.
reactive函数
定义一个对象类型的响应式数据const 对象 reactive(对象),接收一个对象或数组,返回一个代理对象(Proxy对象)reactive定义的响应式数据是深层次的基于ES6的Proxy实现,通过代理对象操作源对象内部数据都是响应式的.
Vue3.0中的响应式原理
Vue2的响应式 实现原理 对象类型:通过Object.defineProperty()对属性的读取,修改进行拦截(数据劫持). 数组类型:通过重写更新数组的一系列方法来实现拦截.(对数组的变更方法进行了包裹).
存在问题 新增属性,删除属性,界面不会更新.(可以使用this.$set()和this.$delete()) 直接通过下标修改数组元素,界面不会更新.(通过splice修改数组元素)
Vue3的响应式 实现原理 通过Proxy代理:拦截对象中任意属性的变化包括属性值的读写属性的添加属性的删除。 通过Reflect反射:对被代理对象的属性进行操作。
new Proxy(data,{// 拦截读取属性值get(target,propertyName){// target 源对象// propertyName 属性名return Reflect.get(target[propertyName])},set(target,propertyName,value){// value 修改的值return Reflect.set(target,propertyName,value)},deleteProperty(target,propertyName){return Reflect.deleteProperty(target[propertyName])}
})
计算属性与监视
computed函数
