vue
LabeLyz
这个作者很懒,什么都没留下…
展开
-
v-for中的key值的作用
首先我们来看一段代码:<body> <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="item in li原创 2021-05-06 00:43:36 · 133 阅读 · 0 评论 -
修改数据页面不更新的原因和解决方案
在项目中,我们有时会遇到我们修改了一个数据,但是视图并不会更新的情况,比如我们在做一个简单的购物车,请求过来的数据没有数量这个属性,于是我们像给这个对象添加一个count属性来表示数量:goods.count = 1;然后我们用计步器增加或减少这个数量时,发现视图并不会发生改变,但是我们console.log(count)却发现count时变化的,没有问题,这是为什么呢?这里要vue的一些底层原理,vue之所以能够做到双向数据绑定,靠的是Object.defineProperty()方法,vue使用原创 2021-05-05 00:35:13 · 447 阅读 · 0 评论 -
axios的封装
首先,在src中创建一个http文件夹,文件夹中创建一个index.js文件,在这个文件中配置一个网络请求的默认配置和拦截器的配置import axios from "axios";import router from '../router'axios.defaults.timeout = 10000// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config;}原创 2021-05-05 00:34:42 · 59 阅读 · 0 评论 -
vuex的核心概念和运行机制
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据Vuex的核心概念及其作用:state 所有的数据都存储在state中 state是一个对象mutations 可以直接操作state中的数据actions 只能调用mutations的方法getters 类似计算属性,实现对state中的数据做一些逻辑性的操作modules 将仓库分模块存储Vuex运行机制:在组件中通过dispatch来调用actions中的方原创 2021-05-05 00:34:07 · 47 阅读 · 0 评论 -
vue-router钩子函数
vue-router钩子函数有三个类型,分别是全局路由守卫,单个路由守卫和组件独享守卫。const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes,});//全局前置守卫router.beforeEach((to, from, next) => {});// 全局后置钩子router.afterEach((to, from) => {}); { pa原创 2021-05-05 00:33:10 · 313 阅读 · 0 评论 -
$nextTick
什么是nextTick?Vue官网是这样定义的:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。我们来看下面的代码:<body> <div id="app"> <h1 ref="h1">{{msg}}</h1> <button @click="next">next</button> </div> <script s原创 2021-05-05 00:32:43 · 56 阅读 · 0 评论 -
v-if和v-for的优先级
v-if和v-for同时使用时,v-for优先级更高在Vue的官网中,不推荐v-if和v-for同时使用这种写法是不推荐的:<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li></ul>Vue更推荐这种写法:<ul v-if="user.isActive"> .原创 2021-05-05 00:30:22 · 53 阅读 · 0 评论 -
v-if和v-show的区别
区别:当条件为真的时候没有区别;当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏,v-show通过css中display属性来控制使用场景:v-if更适合数据的筛选和初始渲染,v-if还可以结合v-else、v-else-if一起使用,v-show更适合元素的切换...原创 2021-05-05 00:29:48 · 42 阅读 · 0 评论 -
组件中data为什么是个函数
当我们只有一个根组件时,data可以为一个对象,但是我们做项目时,往往要进行组件的复用,这里有一个例子:<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter></div>在这里如果我们将data原创 2021-05-05 00:29:20 · 81 阅读 · 0 评论 -
vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。主要分为一下几个模块:Vue:把 data 中的成员注入到 Vue 实例,并且把 data 中的成员转成 getter/setterObserver:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知 DepCompiler:解析每个元素中的指令/插值表达式,并替换成相应的数据De原创 2021-05-05 00:27:16 · 60 阅读 · 0 评论 -
实现一个简易Vue(一)
整体分析Vue把 data 中的成员注入到 Vue 实例,并且把 data 中的成员转成 getter/setterObserver能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知 DepCompiler解析每个元素中的指令/插值表达式,并替换成相应的数据Dep添加观察者(watcher),当数据变化通知所有观察者Watcher数据变化更新视图1. Vue功能负责接收初始化的参数(选项)负责把 data 中的属性注入到 Vue 实原创 2021-05-04 00:00:13 · 66 阅读 · 0 评论 -
实现一个简易Vue(二)Observer
2. Observer功能负责把 data 选项中的属性转换成响应式数据data 中的某个属性也是对象,把该属性转换成响应式数据数据变化发送通知代码class Observer { constructor(data) { this.walk(data) } // 遍历 data 对象的所有属性 walk(data) { // 1. 判断 data 是否是对象 if (!data || typeof data !== 'object') {原创 2021-05-04 00:00:57 · 123 阅读 · 0 评论 -
实现一个简易Vue(三)Compiler
3. Compiler功能负责编译模板,解析指令/插值表达式负责页面的首次渲染当数据变化后重新渲染视图代码class Compiler { constructor(vm) { this.el = vm.$el this.vm = vm this.compile(this.el) } // 编译模板,处理文本节点和元素节点 compile(el) { let childNodes = el.childNodes // 获取所有子节点原创 2021-05-04 00:02:51 · 263 阅读 · 0 评论 -
实现一个简易Vue(四)Dep 与 Watcher
4. Dep功能收集依赖,添加观察者(watcher)通知所有观察者代码class Dep { constructor() { // 存储所有的观察者 this.subs = [] } // 添加观察者 addSub(sub) { if (sub && sub.update) { this.subs.push(sub) } } // 发送通知 notify() { // 遍历 subs原创 2021-05-04 00:03:40 · 258 阅读 · 1 评论 -
Vue面试题总结
1、简述MVVM和MVCMVC:Model(模型)View(视图)Controller(控制器)简单的理解:视图请求数据,将请求发送至控制器,控制器再将请求发送给模型,模型去查找数据,找到之后传给控制器,控制器再传给视图进行渲染。MVVMModel 代表数据模型View 代表UI视图ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁,可以理解成mvc中的控制器)简单理解:视图请求数据,将请求发送至VModel,在Vmodel的两端具有监听机制,直接调用模型的数原创 2021-04-28 21:25:24 · 175 阅读 · 0 评论 -
vue中的组件通信
1.父传子 prop在父组件的子组件标签上绑定一个属性,挂载要传输的变量<template> <div class="father"> <h1>父组件</h1> <Son :toSon="msg"></Son> </div></template><script>import Son from "./Son";export default { component原创 2021-04-25 00:27:53 · 108 阅读 · 1 评论