计算属性如何使用
一般我们在写vue的时候,在模板内写的表达式非常便利,它运用于简单的运算,但是他也有一些复杂的逻辑,包括运算、函数调用等,那么就用到了计算属性,他依赖于data中数据变化的 data 中数据变化的时候 计算属性就会重新执行,视图也会更新。
计算属性的 set get 如何使用
每一个计算属性都包含一个getter 和一个setter ;
绝大多数情况下,我们只会用默认的getter 方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter 和setter 都声明。
但在你需要时,也可以提供一个setter 函数, 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数,
watch 如何使用
之前做一个H5的项目。需求是当用户在输入完了手机号和验证码之后,登录按钮才可以点击。
在没有使用vue之前,我们可能是通过input的change事件来判断,用户是否输入了内容,然后修改按钮的状态。现在有了vue,就省事了很多,我们只需要在watch中,监听数据模型的值改变即可。
在input 上绑定一个v-mode="pass"绑定一个数据名, 在data里写入绑定的事件名,通过watch来监听输入内容的改变,但是如果,监听的是一个对象 里面有一个deep属性可以在选项参数中指定deep:true.也叫深度监听
<input v-model="passw2" placeholder="请再次输入密码" />
计算属性和watch的区别
在我们运用vue的时候一定少不了用计算属性computed和watch
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。
就好在div写一个表达式name,data里写入num和lastname,firstname,在watch里当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值,
而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
prop 验证,和默认值
我们在父组件给子组件传值得时候,为了避免不必要的错误,可以给prop的值进行类型设定,让父组件给子组件传值得时候,更加准确,prop可以传一个数字,一个布尔值,一个数组,一个对象,以及一个对象的所有属性。
组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告
比如传一个number类型的数据,用defalt设置它的默认值,如果验证失败的话就会发出警告。
prop 如何传一个对象的所有属性
方法一:使用不带参数的v-bind写法
v-bind中没有参数,而组件中的props需要声明对象的每个属性
方法二:使用带参数的v-bind写法
v-bind后跟随参数todo,组件中的props需要声明该参数,也就是v-bind后跟随参数todo,
组件就可以通过todo来访问对象的属性
插槽,具名插槽,插槽默认内容
单个插槽;在父组件写一个标签,在子组件通过slot来接受标签里的内容,他只能用一个slot。单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。
具名插槽:在父组件标签写入slot,子组件里面写name名字,他们两个名字要相对应,才能通过名字在找到对应的位置。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了。
作用域插槽
举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,子组件与父组件的数据动态交互的一种常见案例
父组件中必须要有template元素,且必须有scope特性,scope特性中是临时变量名,
接收从子组件中传递上来的属性,属性可以是任意定义的。
动态组件
在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中<component>用:is来挂载不同的组件。
我们在components中注册了三个模板,当我们点击当前按钮的时候,就会将模板切换模板,可以说是非常方便了。如果要把组件切换过程中的将状态保留在内存中,可以添加一个 keep- alive 指令参数,防止重复渲染DOM。
动态组件上使用keep-alive
<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
11子组件访问父组件实例子 $parent
this.$parent
在子组件中判断this.$parent获取的实例是不是父组件的实例
在子组件中console.log(this.$parent) 打印出this.$parent
在父组件中console.log(this) 打印出this
看看打印出来的两个实例是不是同一个
如果是同一个 就可以在子组件中通过this.$parent.属性名和方法名,来调用父组件中的数据或者方法
12 父组件访问子组件变量 this.$refs.usernameInput
给子组件添加ref属性然后,通过vm.$refs来调用子组件的methods中的方法或者获得data
父组件: 在子组件中加上ref即可通过this.$refs.ref.method调用
13 vue双向数据绑定原理
view更新data其实可以通过事件监听即可,比如input标签监听 'input' 事件就可以实现了。所以我们着重来分析下,当数据改变,如何更新视图的。
数据更新视图的重点是如何知道数据变了,只要知道数据变了,那么接下去的事都好处理。如何知道数据变了,就是通过Object.defineProperty( )对属性设置一个set函数,当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。
视图view到data :可以通过事件监听即可,比如input标签监听 'onchange' 事件就可以实现了
data到view:通过Object.defineProperty( )对属性设置一个set函数,当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这个set函数里面就可以实现data更新view了。
14 vue 组件通信
1) 父传递子
父:自定义属性名 + 数据(要传递)=> :value="数据"
子:props ["父组件上的自定义属性名“] =>进行数据接收
1) 子传递父
子:this.$emit('自定义事件名称', 数据) 子组件标签上绑定@自定义事件名称='回调函数'
父:methods: { 回调函数() { //逻辑处理 } }
1) 兄弟组件
通过中央通信 let bus = new Vue()
A:methods :{ 函数{bus.$emit(‘自定义事件名’,数据)} 发送
B:created (){bus.$on(‘A发送过来的自定义事件名’,函数)} 进行数据接受
15 vue 生命周期
vue实例从被创建到销毁的一系列过程就叫vue生命周期.也就是从开始创建、初始化数据、编译模版、挂载DOM→渲染、更新、渲染、卸载等一系列过程。
BeforeCreate 实例创建之前调用
Created 实例创建成功,此时data中的数据已经初始化
beforeMount 挂载之前的状态
Mounted 已经挂载的状态
BeforeUpdate 数据更新前的状态
Updated 数据更 新完成时的状态
beforeDestory 在vue实例销毁之前调用,
Destoryed 在vue实例销毁之后调用,vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
16 vue webpack打包项目修改哪些配置
Config文件夹下面的index.js 设置里面的assetsPublicpath属性值为./
如果图片太大的话,可以设置bulid文件夹下面的webpack.base.conf.js,设置图片的limit将它的值设大点,
Utils.js添加publicpath为../../
17 vue路由传参数
使用query方法传入的参数使用this.$router.query接受
使用params方式传入的参数使用this.$router.params接受
一、用name传递参数
在路由文件src/router/index.js里配置name属性。
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:
<p>{{ $route.name}}</p>
二、通过<router-link> 标签中的to传参
<router-link>标签中的to属性进行传参,需要注意的是这里的to要进行一个绑定,写成:to。
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
18 路由导航守卫
全局钩子函数 : beforeEach() 每次每一个路由改变的时候都得执行一遍
组件内的钩子函数 :
to: (Route路由对象) 即将要进入的目标 路由对象
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子
beforeRouteEnter 路由之前调用
beforeRouteUpdate 复用时调用
beforeRouteLeave 离开路由时调用
19 什么是vuex,使用vuex的好处
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。
好处:
可以做状态管理 采用localstorage保存信息,数据便一直存储在用户的客户端中
使用场景:适合在巨大后复杂的项目中使用,
20 state,getter,mutation,action,module,plugins 各自的用途,和用法
State:{ count: 0 } 保存着所有的全局变量
Getter: 对state中的数据派生出一些状态,例如对数据进行过滤。(可以认为是store中的计算属性),会对state中的变量进行过滤再保存,只要state中的变量发生了改变,它也会发生变化,不变化的时候,读的缓存。
Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
一条重要的原则就是要记住 mutation 必须是同步函数。
Action: Action 类似于 mutation, 不同点在于,Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作,mutation只能是同步。
有点不同的是Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
Module: //模块,可以写很多模块,最后都引入到一个文件。分散管理。
生成实例的时候 都放在Store的modules中
plugins:插件(Plugins)是用来拓展webpack功能的,它们会在整个构建过程中生效,执行相关的任务。
21 vuex中使用persistedstate 插件进行长久储存 (需要自己写代码测试)
安装 npm install vuex-persistedstate --save
store.js引入
import VuexPersistence from "vuex-persist";
创建一个对象:
const vuexLocal = new VuexPersistence({
storage:window.localStorage
})
安装进vuex插件:
export default new Vuex.Store({
state:{
info:{}
},
mutations:{
setInfo(state,info){
state.info=info;
}
},
plugins:[VuexPersistence()]
})
默认存储到localStorage
想要存储到sessionStorage,配置如下
import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})
22 vue开发中遇到的问题
1、setInterval路由跳转继续运行并没有及时进行销毁
比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿。
解决方案:在组件生命周期beforeDestroy停止setInterval
beforeDestory() {
clearInterval(this.timer);
MessageBox.close()
}
2、vuejs循环插入图片
在写循环的时候,写入如下代码:
<div class="bio-slide" v-for="item in items">
<img src="{{item.image}}"></div>
此时在控制台会出现警告
[Vue Warn]: src=”{{item.image}}”: interpolation in “src” attribute will cause a 404 request. Use v-bind:src instead.这里意思是在“src”属性插值将导致404请求。使用v-bind:src代替。
所以替换成如下:
<div class="bio-slide" v-for="item in items">
<img v-bind:src="item.image">
</div>
这里需要主要,v-bind在写的时候不能再用{{}},
3、组件的异步加载(按需加载组件)
在平时的demo中,你可能不会遇见这个需求,当页面很多,组件很多的时候,你会发现你的页面在首次加载的时候,异常的慢,这个是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了,这个时候就需要对页面优化了,就需要异步组件了。如何去写异步组件呢,实际上很简单,只需要在你的路由index,js里加上require就可以了,像下面这样,这也是所谓的按需加载组件的实现原理。
4、vuex组件中访问state报错
TypeError: Cannot read property ‘state’ of undefined”
在组件中使用this.$store.state.test访问state的属性报错,是因为store的实例并未注入到所有的子组件,需修改main.js
new Vue({
el: '#app',
store, //将store注入到子组件
router,
components: { App },
template: '<App/>'
})
网友评论