渡一

用户1493079850615
65 阅读3分钟

构造函数

JS所有的对象，都是通过构造函数产生的
function Person(firstName, lastName) {
   // var this = {};
  this.firstName = firstName ;
  this.lastName = lastName;
  this.sayHi = function(){ };
  // return this;
}
var person1 = new Person('肖', '瑞');
var obj = {a:1,b:2}//这是一个语法糖，实际是var obj = new Object(); obj.a = 1; obj.b = 2;

原型

image.png

new Person().__proto__ === function Person(){}.prototype;
指的是同一个地址，是全等的；

原型链

image.png

image.png

所有对象都有隐式原型(.__proto__),原型对象也有.__proto__,函数是.prototype
原型链：通过隐式原型(.__proto__)一块一块往上指，形成的链条【绿色部分】；Object.prototype.__prpto__比较特殊，他是指向null。

this

this指向：
函数中的this指向谁，就看在哪里调用；
用new Person()；调用，this就指向Person这个对象；
直接Person();调用；this指向window这个对象；
所以在定义一个函数的时候，this是不知道指向谁的，要看在哪里调用；

~~改变this指向~~：
函数有两个额外属性：apply和call-----> person.call()/person.apply()
例：
function m(a, b){
  console.log();
}
var arr = [1,2,3];
m.call(arr, 参数a, 参数b);//调用m函数，让它里面的this指向arr
m.apply(arr,[参数a, 参数b]);都一样，区别在于参数的传递方式；

Vue

1、vue虚拟DOM树

image.png

image.png

image.png

本质渲染就是重新调用render函数生成虚拟DOM树。
挂载：1、el挂载2、通过vm.$mount("#app")这个方法挂载
new Vue({
    router,
    render: (h) => h(App),
}).$mount('#app')

new Vue({
    el: "#app",
    render: (h) => h(App)
})
2、组件
注册组件：全局注册Vue.component('组件名', componentName)、局部注册components:{name}
3、vue-cli

image.png

4、计算属性computed
通过很多已有的属性计算出一个未知的属性（根据一个已有的数据得到一个新的数据），可以直接在模板里面写表达式，但是如果表达式很长，就在computed里面计算好
计算属性优势他有缓存，如果适用方法return出全名，有几个就会执行几次，但计算属性只运行一次，计算属性监测依赖值变化get(){}函数，set(){}函数是修改依赖的地方
computed:{
    fullName(){
        //这是简写，只有getter的情况
    }
}
computed:{
    fullName: {
        get(){
        },
        set(val){
        }
    }
}

只会运行一次，所以这里不应该调用接口什么的
5、插槽slot
里面的内容是极度丰富的，很多，就用插槽；要不然就用props了
默认插槽：<slot></slot>
具名插槽:<slot name="header"></slot>  
        <Header><template v-slot:header></template></Header>
        <Header><template #header></template></Header>//简写
6、路由vue-router
hash路由页面不刷新，做无感刷新比较好
historyApi（history.pushState()）也能做到不刷新，meta标题没有刷新
7、loading

image.png

得到组件渲染的DOM
import Icon from "./components/Icon"; //这是一个虚拟DOM。
var dom = getComponentRootDom(Icon, {color:}); //真实的DOM并且挂载了，getComponentRootDom这个和render的h函数很相似

//cssmodule
css文件class，   【文件名.module.css】确保加上的样式不重复,相当于v-data
8、获取远程数据

image.png

image.png

**axios**
开发环境会遇到跨域问题：前端会加一个代理，在前端发起一个请求，会转化成和服务器同域名的请求地址转发给服务器
配置代理：vue.config.js
devServer:{
    proxy:{
        '/api': {
            target: "https://www.zhihu.com"
        }   //凡是/api开头的全部代理到https://www.zhihu.com
    }
}

**Mock**
mock就会拦截请求，不会发到服务器上。npm i mockjs
在src下面新建一个文件夹mock
import Mock from 'mock';
Mock.mock("/api/banner", "get", {
    code: 0,
    msg: "",
    data: [
        {
            
        }
    ]
})

【main.js引用】
import './mock';
9、自定义指令、动态图片

image.png

v-loading="自定义表达式"
指令也有钩子函数：
{
    bind(el, binding){
    
    },
    inserted(el, binding){
    },
    update(el, binding){
    }
}


模板的img图片的路径<img src="@/assets/logo.png"/>静态路径这是会被模板解析出来的
动态路径data(){return{logo: '@/assets/logo.png'}}不能解析，要这样写如下：
<img :src="logo"/>
import logo from '@/assets/logo.png';
data(){
    return{
        logo: logo
    }
}
10、组件递归
组件的name: '文件名'
-   递归组件必须定义 `name` 属性，否则无法在模板中调用自身。
**性能优化**：
-   如果嵌套层级非常深，递归组件可能会导致性能问题。可以通过虚拟滚动或懒加载子节点来优化性能。
-   避免在递归组件中使用复杂的计算属性或侦听器。
avatar
文章
阅读
粉丝