做网店有哪些网站,徐州网站营销,网站备案怎么注销,帮人建网站价格赚钱吗1. computed 函数
定义计算属性#xff1a;
computed 函数#xff0c;是用来定义计算属性的#xff0c;计算属性不能修改。 计算属性应该是只读的#xff0c;特殊情况可以配置 get set 核心步骤#xff1a; 导入 computed 函数 执行函数 在回调参数中 return 基于响应…1. computed 函数
定义计算属性
computed 函数是用来定义计算属性的计算属性不能修改。 计算属性应该是只读的特殊情况可以配置 get set 核心步骤 导入 computed 函数 执行函数 在回调参数中 return 基于响应式数据做计算的值 用 变量接收
1.1 基本使用 1.2 高级用法set和get方法 总结计算属性两种用法
给 computed 传入函数返回值就是计算属性的值给 computed 传入对象get 获取计算属性的值set 侦听设置计算属性改变。get 获取值需要返回一个值set 设置值需要接收设置的值。
2. watch函数
watch函数是用来定义侦听器的
作用: 侦听一个或者多个数据的变化数据变化时执行回调函数 watch函数的第一个参数 响应式对象 俩个额外参数1. immediate立即执行 2. deep深度侦听 基础使用 导入watch函数 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数 2.1 侦听单个数据
侦听ref定义的响应式数据 2.2 deep 深度侦听
侦听 reactive 定义的响应式数据复杂数据类型deep 深度侦听 默认机制通过 watch 监听的 ref 对象默认是 浅层侦听的直接修改嵌套的对象属性不会触发回调执行 需要开启 deep 选项 deep 深度侦听默认 watch 进行的是浅层侦听不加 deep: true 侦听不到。
原因 因为 watch 侦听的是 user 这个对象对 user 内部的 name 属性值进行更改后不会导致整个 user 的地址发生改变。所以侦听不到只有把这个对象的地址完全改变才能侦听到。
2.3 侦听多个数据的变化
同时侦听多个响应式数据的变化不管哪个数据变化都需要执行回调 2.4 立即侦听
在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调 2.5 精确侦听对象的某个属性
在不开启 deep 的前提下侦听属性 name 值的变化只有 name 变化时才执行回调可以把第一个参数写成函数的写法返回要监听的具体属性 3. ref属性
获取 DOM 或者组件实例可以使用 ref 属性写法和 vue2.0 需要区分开
vue2.0 获取单个 DOM 或者组件 vue3.0 获取单个 DOM 或者组件 获取 v-for 遍历的 DOM 或者组件 4. 组件通信
4.1 父传子与子传父
父组件 子组件 总结
父传子在 setup 中使用 props 数据 setup(props){ // props就是父组件数据 }子传父触发自定义事件的时候emit来自 setup(props,{emit}){ // emit 就是触发事件函数 }
4.2 依赖注入provide与inject
使用场景有一个父组件里头有子组件有孙组件有很多后代组件共享父组件数据。
根组件 子组件 孙子组件 总结
provide函数提供数据和函数给后代组件使用inject函数给当前组件注入provide提供的数据和函数
5. mixins语法
官方话术
混入 (mixin) 提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项。
5.1 全局混入所有组件混入了这些逻辑代码
vue 2.0 写法
// 全局混入 全局mixin
// vue2.0 写法 Vue.mixin({})
app.mixin({methods: {say () {console.log(this.$el,在mounted中调用say函数)}},mounted () {this.say()}
})
vue 3.0 写法 5.2 局部混入通过mixins选项进行混入
假设两个组件内部需要使用相同的代码逻辑可以先建一个js文件封装重复的代码并且导出该对象。 使用配置对象 mixins以数组的形式接收导出的对象模版直接使用导出对象里的方法。
