为什么选b-CSDN博客

原创！！！基础！！！

1.this关键字(指向)?this是JavaScript语言的一个关键字，它是函数运行时，在函数体内部自动生成一个对象，只能在函数体内部使用。函数的不同使用场合，this有不同的值。总的来说this就是函数运行时所在的环境对象。全局调用时，指向全局对象window在函数中调用，作为某个对象的方法调用，this指向这个上级对象在构造函数中调用，指向构造函数生成的新对象实例箭头函数，箭头函数没有自己的this，this指向父级上下文隐式绑定，函数的调用是在某个对象上触发的，即调用位置上存在上下文

2021-05-20 21:23:19 131

转载 vue简版源码(observer)

function Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; //对data里所有的属性名进行遍历 Object.keys(data).forEach(function(key) {

2021-05-05 01:22:15 145

转载 vue简版源码(compile)

function Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是则根据选择器去查找对应的元素然后保存 this.$el = this.isElementNode(el) ? el : document.querySelector(el);

2021-05-05 01:21:45 117

转载 vue简版源码(watcher)

function Watcher(vm, exp, cb) { //在watcher的实例上保存回调函数 this.cb = cb; //用于更新界面的回调函数 this.vm = vm; //MVVM的实例vm this.exp = exp; //对应的表达式 this.depIds = {}; //n个相关的dep的容器 this.value = this.get(); //初始化获取当前表达式对应的value}Watcher.prototype =

2021-05-05 01:21:16 143

转载 vue简版源码(MVVM)

function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; this.$options.beforeCreate && this.$options.beforeCreate(); //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; /

2021-05-05 01:20:51 114

原创 axios的封装

创建utils文件夹，下级目录创建request.jsimport axios from 'axios';const request = axios.create({ baseURL: '', timeout: 5000});request.interceptors.request.use(config=>{ //数据传输之前做些什么 return config });request.interceptors.response.use(config=>{

2021-05-05 01:04:43 206

原创 vuex的核心概念和运行机制

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。使用 Vuex 统一管理状态的好处1.能够在 vuex 中集中管理共享的数据，易于开发和后期维护2.能够高效地实现组件之间的数据共享，提高开发效率3.存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步核心概念stateState 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。Mutation用于变更state中的数据,并且只有Mu.

2021-05-05 00:56:09 144

原创 vue-router钩子函数和执行顺序

钩子函数全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；beforeEach（）每次路由进入之前执行的函数。afterEach（）每次路由进入之后执行的函数。beforeResolve（）2.5新增单个路由（实例钩子）：某个指定路由跳转时需要执行的逻辑。beforeEnter（）beforeLeave（）组件路由钩子：beforeRouteEnter（）beforeRouteLeave（）beforeRouteUpdate（）导航守卫回调参数to：目标

2021-05-05 00:39:01 1349

原创 $nextTick

原理Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。官方示例：new Vue({ // ... methods: { // ... example: function () { // modify data this.message = 'changed'

2021-05-05 00:23:23 271

转载 vue中修改数据页面不更新的原因和解决方案

原因在vue2中通过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新。如何解决Vue.set()Vue.set( target, propertyName/index, value )参数：target：要修改的对象或数组propertyName/i

2021-05-05 00:16:49 1825

原创 v-for中key值的作用

对于用v-for渲染的列表数据来说，数据量可能一般很庞大，而且我们经常还要对这个数据进行一些增删改操作。v-for默认使用就地复用策略，列表数据修改的时候，会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素。key 是特殊的attribute主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地复用相同类型元素的算法。使用 key 时，它会基于 key 的变

2021-04-30 11:42:03 187

原创 v-if和v-for的优先级

v-for优先于v-if被解析如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环会执行，浪费浏览器性能。想要避免出现这种情况，需要在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环。如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项...

2021-04-29 21:18:57 627

原创 v-if与v-show的区别

都可以动态控制着dom元素的显示隐藏v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；...

2021-04-29 20:06:05 158

原创组件中data为什么是个函数

vue实例中的data属性既可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数如果为组件data直接定义为一个对象则会得到警告信息警告说明：返回的data应该是一个函数在每一个组件实例中在定义好一个组件的时候，vue最终都会通过Vue.extend()构成组件实例vue组件可能会有很多个实例，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况..

2021-04-29 20:04:57 118

原创 vue双向数据绑定原理

1、关于双向数据绑定在前端开发中采用MVVM模式时，通常需要编写代码，将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，会再次进行渲染，从而更新视图，使得视图与数据保持一致。另一方面,页面也会通过用户的交互，产生状态、数据的变化，这个时候，将视图对数据的更新同步到数据和后台服务器。2、如何回答vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听

2021-04-29 19:40:13 87

原创 Vue如何进行数据传递

1、父子组件父传子//父组件<template> <div> <child :childList='parentList'></child> //子组件标签 </div></template><script>import child from "./Child.vue";// 引入子组件export default { components: {child}, data() {

2021-04-24 23:19:00 295

原创 js中的注释、fragment方法

如何获取到代码中的注释<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>  </div> </body></html><script type="text

2021-04-22 21:50:52 1316

原创 vue常用钩子函数

1、在keep-alive包裹的活性组件中，加入了activated()，用法和created()、mounted()用法相同，区别是在活性组件中，第一次进入页面时按照created()=>mounted()=>activated()触发，第二次之后只会触发activated()activated(){ 在这里做一些进入页面时的操作},2、计算属性computed:{ getData：function(val){ //在此处做一些对val的操作 return //val 或

2021-04-20 20:58:15 215

原创判断字符串中有数字(面试真题)

var str = "ajgdsfjhaeu349rweuh2ewfdys"; //正则验证 var s = /\d/.test(str); console.log(s); //true //方法二 for (var i = 0; i < str.length; i++) { var num = Number(str[i]); if (num) { console.log("有数字" + num); } else {...

2021-04-19 19:09:34 86

原创在Vue项目中创建全局变量

在src目录下创建一个 Global.js文件，写入以下代码exports.install = function (Vue) { Vue.prototype.$target = "http://39.100.7.70:81/"; //可以写根目录 Vue.prototype.$data = { a:"一条数据" }; //变量定义时建议使用引用数据类型};在main.js中引入import Global from './Global';Vue.use(Globa

2021-04-18 18:46:18 182

原创 Vue生命周期beforeUpdate()和updated()

1、beforeUpdate()是针对视图层的，只有页面中渲染的数据发生改变或者渲染，才会触发这个生命周期函数<template> <div> </div></template>export default { data() { return { msg: 0, }; }, mounted(){

2021-04-15 21:29:14 3465

原创 Vue项目中创建全局自定义组件

在components中创建一个公共组件 (MyList.vue)在main.js中写入import MyList from "./components/MyList.vue" Vue.component(MyList.name, MyList);公共组件中写入<script> export default{ name:"MyList" }</script>之后就可在其他组件中使用公共组件<my-list></my-list&gt.

2021-04-14 20:19:07 113

原创对MVVM的理解

MVVM是什么?WPF·前端最早的MV VM框架knockout在2010年发布·MVVM模式·顾名思义即Model View-Vew Model模式·它萌芽于2005年微软推出的基于Widows的用户弄重考案Model层：对应数据层的域模型·它主要做域模型的同步。通过Ajax/fetch等API完成客户和服务业务Model的同步。在层间矣系里，它主要用于抽象出View Model中视图的Model。View层：作为视图模板存在，在MVVM里，整个View是一个动态模板，除了定义结构、布局外，它展示

2021-04-12 21:06:01 237

weixin_55869886的博客