m0_56713342的博客

/指令所在的dom元素插入到dom树中执行这个函数。//focus(el){ //el指令所在的dom。Vue.directive('自定义指令名',{// //el就是指令所在元素即文本框。const 自定义指令名={

shallowReactive：浅层响应->第一层属性变化会触发更新，不是第一层属性不会触发更新。shallowRef：浅层响应->整体重新赋新值才会触发更新，只改变单个属性不会触发更新。

注意：toRefs将多个数据转成响应式，只是确保第一层数据为响应式，如果是不同层的数据，仅第一层数据为响应式。toRefs:将多个数据转成响应式。toRef:将数据转成响应式。

局部组件，就是vue的导入注册使用，只不过再setup()语法糖下，不需要注册组件。全局组件是在main.js中注册的，通过app实例.component创建。使用 App.vue。

Store 是用定义的，它的第一个参数要求是一个独一无二的名字定义store仓库，其中只有state，getters，actions三个模块，并导出store实例，返回值是创建store实例的方法第一个参数，store的唯一标识， 类似于模块第二个参数， 对象描述仓库可以提供state，getters，actions返回值 是创建store实例的方法规范 userXXXXStore//1.定义用户仓库//defineStore() 创建store实例的函数。

watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。watch 在响应数据初始化时是不会执行回调函数的， watchEffect在响应数据初始化时就会立即执行回调函数。watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。2、 不同点 ：watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控。1、 相同点 ：都可以对数据进行侦听。2 回调函数依赖的数据都会被监控。

watch监控ref数据，深层次监控属性 ，必须手动开启deep:true，不能省略，省略相当于默认 false。watch监控reactive数据，假如需要深层次监控属性需要手动开启deep:true或省略。3.立刻调用 (第三个参数位一个对象，里面可放immediate:true)4.深度监听 (第三个参数位一个对象，里面可放 deep:true)第一个参数监听的数据构成的数组 ​ 第二个参数回调函数。第一个参数：监听的数据 第二个回调函数。基于现有的数据计算出新的数据。1 . 侦听一个数据。

不同点 : reactive只支持引用数据类型,ref支持基本和引用数据类型。ref通过.value获取数据，reactive不需要.value。2、想获取谁，就再谁的标签上添加ref，其ref=‘ref对象’使用reactive响应式数据的时候，不需要.value。reactive函数创建响应式数据，只支持引用数据类型。ref创建响应式引用数据类型低层依赖reactive。ref函数创建响应式数据，返回值是一个对象。1、创建ref对象，将该对象作为ref的值。获取ref创建数据的值要加上.value。

script标签上写setup属性，不需要export default {} setup() 都可以省。setup() 组合式api的入口，执行的时机比beforCreate还早。创建每个属性或方法时也不需要return。创建多个数据就要return多个数据。导入某个组件时也不需要注册。

vuex 专门为vue.js设计的状态管理工具，管理多个组件共享的状态，适合中大型项目，项目组件关系比较简单，用vuex反而增加复杂度。

或写完整写法 this.$router.push(path:‘路径', query: {参数1:值,参数2:值,. . .}路由规则path -> /路径 组件获取 this. $route.query.id。组件获取参数: this. $route.params .id。参数多写成对象的形式。

push()跳转 back()后退 go(1/-1)跳转后退 forword()

封装弹框类的基础组件， visible属性true显示false隐藏。：属性=“数据“ + @update：属性="数据=$event".sync修饰符就是:属性名和@update:属性名合写。v-model中的value不具有语义，要使其有语义写成。:prop属性名，可以自定义，非固定为value。只需将App.vue中的子组件标签写成。:属性.sync='数据' 相当于。用.sync修饰符简化。.sync(有语义)

注意: $nextTick内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例。之前只用document.querySelect('.box')获取的是整个页面中的盒子。⒉.获取时通过$refs获取this.$refs.chartRef 获取。数据改变---->dom更新，需要时间->等待dom更新完毕操作dom。利用ref 和$refs可以用于获取dom元素或组件实例。要获取谁的dom元素，就在谁的标签内加上 ref=’ ‘{ref属性值: ref属性所在的dom或组件}

v-model 原理v-model本质上是一个语法糖。例如应用在输入框上，就是 value属性 和 input事件 的合写。提供数据的双向绑定① 数据变，视图跟着变 :value② 视图变，数据跟着变 @input$event 用于在模板中，获取事件的形参。

是在main.js中注册的指令在任何组件内都可以使用，指令在使用时不论是全局还是局部注册的，写成v-指令名。mounted（）时组件生命周期的挂载后阶段，此阶段可获得渲染后的dom元素。页面一上来就获取焦点，需要借助生命周期mounted，在不使用指令的情况下。指令是directives声明的 ，其中el就是指令所在的dom元素。要先用ref和$refs获取到dom元素，在执行下面代码。在main.js中注册，例如，焦点，字体大小，背景色等。是在某个组件内注册的指令，只能在这个组件内使用。

希望组件的内容（结构）可定制,用slot插槽进行占位那个地方需要定制，就在那个地方用插槽：多个插槽 通过name具名插槽进行区别在slot标签内加上一个name属性如果不用包裹就会默认都是同一个内容v-slot:header 可以简写成 #header使用插槽的组件。

同时还要对其导入的组件进行注册，还要再其组件内定义一个name属性。在App.vue,使用下列代码代替导入组件当标签使用。动态组件是根据组件名渲染组件。

下拉列表 : selected="数据"+@change="数据=$event.target.selected"文本框或密码框相当于 :value="数据"+@input="数据=$event.target.value"复选框 : checked="数据"+@change="数据=$event.target.checked": value="数据" + @input="数据=$event"3.用在组件实现父子数据双向绑定。（用在组件的value没有语义）1.用在表单元素或组件中。

作用：控制元素是否显示与隐藏（v-else , v-else-if辅助v-if进行判断渲染，要紧挨着v-if使用）v-if :是通过js动态创建dom元素或删除元素，v-if可以与v-else , v-else-if搭配使用哦的。下拉列表 : selected="数据"+@change="数据=$event.target.selected"复选框 : checked="数据"+@change="数据=$event.target.checked"其中：v-if ，v-show 都可以控制元素的显示与隐藏。

通过事件总线eventBus实现兄弟组件通信。utils新建一个index.js。在src下新建一个文件utils。祖先通过provide提供数据。孙子组件inject接收数据。使用数据方通过$on订阅。使用vm.$emit。导入 注册 孙子组件。

在子组件内的某个标签内容用{{属性名}}接受，相当于data中的数据，props接收用数组，属性名不止一个，逗号隔开。子组件中的方法通过$emit( ‘ 父组件自定义的事件名’，子组件中data中的数据（根据需求）)父组件：在其引入的子组件标签内，设置自定义属性，自定义事件=‘methods中的方法。子组件里的某个元素，设置事件，调用子组件里的函数，来触发父组件中的方法。父组件：在其引入的子组件标签内，设置自定义属性。在子组件绑定自定义事件（绑定的是父亲的函数）子组件标签绑定单击事件触发父组件的方法。

vue给组件的某个阶段提供了特定的函数（钩子函数）来执行特定的逻辑，当到了某个节点会自动调用。组件中的data必须是一个函数，函数每次执行时候得到新对象。组件是可以复用，用对象形式导致组件的数据相互影响。业务组件--------->components。组件生命周期--------组件从创建到销毁。beforeDestory 数据清理。视图组件（配合路由使用）和业务组件。视图组件------->views。mounted 拿到dom元素。return 的是数据的对象。created 拿到数据。

概念：Vue 是一个用于 构建用户界面 的 渐进式 框架Vue 是一个用于 构建用户界面 的 渐进式 框架，（vue是js的一个渐进式框架）具有响应式，数据驱动视图的思想，不推荐直接操作dom，底层封装了dom，组件开发思想，提供了一些指令，能够提高开发效率，构建单一页面应用1.准备容器2.引包(官网) –开发版本/生产版本3.创建Vue实例 new Vue()4.指定配置项 el data =>渲染数据el指定挂载点，选择器指定控制的是哪个盒子data提供数据。