vue基础知识_vue beforedestroy 阻止-CSDN博客

本文链接：https://blog.csdn.net/m0_38010595/article/details/111935568

概述

Vue是由一个个实例构建而成的，一个组件就是一个Vue的实例

官网

https://cn.vuejs.org/v2/guide/ link

data

扩展： Vue组件中的data为什么必须是一个函数 https://www.jianshu.com/p/f3e774c57356

methods、watch、computed 、filter

computed

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性
注意：在data中没有直接声明出要计算的变量，也可以直接在computed中写入
示例代码：

      <p id="app">{{fullName}}  </p>
        computed: {  
            fullName() {  
                return this.firstName + '' + this.lastName  
            }  
        }  
    })

计算属性默认只有getter，可以在需要的时候自己设定setter
示例代码：

 computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                let names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

watch

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
注意：如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。
示例代码：

  watch: {
            firstName: function (val) {
                this.fullName = val + '' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + '' + val
            }
        }

methods

方法，只要调用就会重新执行一次，相应的有一些触发条件

methods:{
// 进行方法的定义
getName(){ }
}

methods和computed二者差别

在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样
computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果

computed和watch二者差别

一个是计算，一个是观察，在语义上是有区别的
计算是通过变量计算来得出数据
而观察是观察一个特定的值，根据被观察者的变动进行相应的变化

filter

过滤器，一般用于文本格式化

// g格式化前面的值即为第一个传参，即msg1，而这里的 alice 则是第二个参数 msg2
 <h3>{{msg | formatText('alice')}}</h3>
filters: {
        formatText(msg1,msg2) {         
         }       
}

Vue指令大全：https://www.jianshu.com/p/c4a87e1b4ef7

使用v-for的时候注意

用 v-for="item of items" 遍历数组 --- of，最多支持两个参数 (item, index)

用v-for="value in myObject"遍历对象 ---in，最多支持三个参数 (value, key, index) ,第一个是值，第二个是键，第三个是索引
// 注意 js遍历的时候只支持参数key for( key in obj){}

vue 组件属性 name的作用: https://blog.csdn.net/kangkang_style/article/details/88689821

路由

前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
分为声明式路由和编程式路由

声明式

 <router-link  :to="{ name: 'user_info', params: { name: userinfo.loginname }}"></router-link >

编程式

this.$router.push({
   name:"detail",
   params:{
    name:'nameValue'
 }
});

获取路由传递的参数

this.$route.params.id
this.$route.query.id

注意：接收参数的时候，已经是$route而不是$router了哦！

params传参和query传参的区别

query要用path来引入，params要用name来引入，
接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name
query更加类似于我们ajax中get传参，params则类似于post
即query在浏览器地址栏url中显示参数，而params则不显示

hash模式和history模式的区别

Vue-router 中有hash模式和history模式

hash模式

vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，
hash —— 即地址栏 URL 中的 # 符号，它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

总结

hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由

生命周期

在这里插入图片描述

beforeCreate

实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行的生命操作，一般还未用过

created

数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染
可以在这个周期里面进行后台接口的请求，渲染的时候速度反而会更快
created时候可以调用的数据

beforeMount

DOM未完成挂载（未将js里面的数据渲染到html上），数据初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。

mounted

数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去
这个周期适合执行初始化需要操作DOM的方法
特别注意
mounted渲染完毕并且子组件也已经渲染完毕

beforeUpdate

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。
beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环

beforeDestroy

这个周期是在组件销毁之前执行，有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method

Destroyed

暂时不知道这个周期跟beforeDestroy有什么区别，在这个周期里面调用data的数据和methods的方法都能调用

this.$set(‘对象’，‘键名’,‘键值’)

作用：给data对象新增属性，并触发视图更新
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的；即该属性必须是在data中存在的，视图层才会响应该数据的变化
这时候便需要使用 this.$set来进行强制刷新视图中的绑定值

this.$forceUpdate()

迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件

this.$nextTick(()=>{})

将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它，然后等待 DOM 更新

mixins混入

相关链接：https://cn.vuejs.org/v2/guide/mixins.html
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
实际意义：将组件的选项抽离出去，单独管理，复用
有两种使用形式
局部混入
全局混入

被调用的mixins和当前调用的vue文件中相关调用的代码顺序

1. data：mixins中的data会合并到data中，有冲突的话，data中数据覆盖mixins中的数据
2. 钩子函数：mixins中的钩子函数也会执行，先执行mixins中的钩子函数
钩子函数如下：beforeCreated、created、beforeMount 、mounted、beforeUpdata  、updataed 、beforedestory、destoryed
3. methods、components 、directives和watch
methods、components 和 directives会执行，但有冲突时，原methods、components 和 directives会覆盖mixins中的methods、components 和 directives。