标签: vue

函数声明与变量提升js中没有函数重载，其他语言中（如java）java中，可以存在同名函数，
只要传入的参数数量或者类型不同即可。在js中，定义了两个同名函数后，
后面的函数会覆盖前面定义的函数。
this指向
1. 函数调用时，非严格模式下，指向window，严格模式下，this 是undefined
2. 以方法调用时，指向调用该方法的对象
3. 使用new创建一个对象时，指向该对象
4. call,apply ,bind可以改变this指向区别，传参不同
apply,call,bind用法区别

zzf2021/9/29大约 4 分钟

为什么data是个函数且返回一个对象

data之所以是一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。
vue常见的修饰符有哪些？

4NTySU.png
组件间传值的方式有哪些？

父组件传值给子组件，子组件使用props进行接收

子组件传值给父组件，子组件使用$emit+事件对父组件进行传值

组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据

使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C

使用$refs获取组件实例，进而获取数据

使用Vuex进行状态管理

使用eventBus进行跨组件触发事件，进而传递数据
使用provide和inject，官方建议我们不要用这个，我在看ElementUI源码时发现大量使用
使用浏览器本地缓存，例如localStorage

不需要响应式的数据的处理方法？

在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。

// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
    
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

原因：Object.defineProperty没有对对象的新属性进行属性劫持

对象新属性无法更新视图：使用Vue.$set(obj, key, value),组件中this.$set(onj, key, value)

删除属性无法更新视图：使用Vue.$delete(obj, key),组件中this.$delete(obj, key)
直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？

原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接arr[index] = xxx是无法更新视图的

使用数组的splice方法，arr.splice(index, 1, item)

使用Vue.$set(arr, index, value)
nextTick的用处？
```
this.name = '林三心'
this.age = 18
this.gender = '男'
```
我们修改了三个变量，那问题来了，是每修改一次，DOM就更新一次吗？不是的，Vue采用的是异步更新的策略，通俗点说就是，同一事件循环内多次修改，会统一进行一次视图更新，这样才能节省性能嘛
```
<div ref="testDiv">{{name}}</div>

name: "小林"

this.name = "小尹"
console.log(this.$refs.testDiv.innerHTML);  // 小林
```
前面说了，Vue是异步更新，所以数据一更新，视图却还没更新，所以拿到的还是上一次的旧视图数据，那么想要拿到最新视图数据怎么办呢？
```
this.name="小尹"
this.$nextTick(() => {
    console.log(this.$refs.testDiv.innerHTML);   //小尹
})
```
子组件改变props里的数据会发生什么?

如果修改的是基本数据类型，则会报错；

如果改变的是引用类型，this.obj.key="__"：不报错；this.obj= "~"：会报和基本数据类型一样的错

watch监听一个对象时，如何排除某些属性的监听？

注意

下面代码是，params发生改变就重新请求数据，无论是a，b，c，d属性改变

data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

注意

但是如果我只想要a，b改变时重新请求，c，d改变时不重新请求呢？

mounted() {
    Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
      .forEach((_) => {
        this.$watch((vm) => vm.params[_], handler, {
          deep: true,
        });
      });
  },
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

vue的hook的使用

同一组件中使用

// 常用的使用定时器的方式
export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

上面的做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：

export default{
  methods:{
    fn(){
      let timer = setInterval(()=>{
        //具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{  // 指定beforeDestroy生命周期清除timer
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

父子组件使用

如果子组件需要在mounted时触发父组件的某一个函数，平时都会这么写

//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

// 子组件
mounted () {
  this.$emit('childMounted')
},

使用hook的话可以更方便：

//父组件
<rl-child @hook:mounted="childMountedHandle"/>

method () {
  childMountedHandle() {
  // do something...
  }
},

Vue的el属性和$mount优先级？

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
}).$mount('#ggg')

vue官方表示：el和$mount同时存在时，el优先级 > $mount

如何获取data中某一个数据的初始状态？

data() {
    return {
      num: 10
  },
mounted() {
    this.num = 1000
  },
methods: {
    howMuch() {
        // 计算出num增加了多少，那就是1000 - 初始值
        // **可以通过this.$options.data().xxx来获取初始值**
        console.log(1000 - this.$options.data().num)
    }
  }

动态指令和参数

<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick",
      someProps: someCondition ? "num" : "price"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

zzf2021/9/22大约 5 分钟

JS防抖与节流-watch监听-路由监听-attrs

JS防抖与节流，watch监听，路由监听，$attrs的多层组件传值

防抖：防止事件短时间内持续触发，只有当超出定时器规定时间才触发一次

<button>提交</button>
//js
var button=document.getElementByTagName("button")[0];
let timer=null;  //设置定时器
button.onclick=function(){
  if(timer!==null){
    clearTimeOut(timer); //超出了定时时间，timer置为null
  }
  timer=setTimeOut(()=>{ //若还在定时器规定的时间内触发，则不断刷新定时时间
    console.log("button点击触发"); //需要防抖的事件，只有在超出定时时间才触发
  },300);
}

zzf2021/9/14大约 3 分钟

原生微信小程序

基本语法

多查小程序官方文档

<view> {{message}} </view>
<view hidden="true"> {{message}} </view>  // hidden属性隐藏
<text> Hello World </text>
<swiper>
  <swiper-item autoplay indicator-dots circular>//轮播图自动播放、圆点、循环
  	<navigator url="___"> //跳转的页面路径
  		<image src="___" mode="widthfix"><image> //图片宽高自适应，保持原有比例，然后根据原图大小控制swiper的大小即可达到较好的展示效果
    </navigator>
  </swiper-item>
</swiper>

Page({
  data: {
    message: 'Hello MINA!',
    list:['1','2','3','4'],
    scrollTop:0
  }
})

<view wx:for="{{_____}}" wx:key="__"> {{item}} </view>  //内容可直接使用item
<block></block> //占位符

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

<scroll-view scroll-y scroll-top="{{scrollTop}}">//每次切换页面时，用this.setData({})让将该页scrollTop变为0即可到达顶部
    <view
	wx:for="{{list}}"
	>{{item}}</view>
</scroll-view>

zzf2021/8/2大约 14 分钟

面试题目归档

js事件委托

给同层次的所有元素的共同的祖先节点添加一个事件处理程序，而不用给每一个

元素都添加事件处理

闭包

闭包指的是引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。

由于闭包会保留它们包含函数的作用域，所以比其他函数更占用内存。过度使用闭包可能导致内存过渡占用

移动端适配的方案

zzf2021/7/9大约 4 分钟

VueRouter-VueX

VueRouter使用

/router/index.js

import VueRouter from 'vue-router'  //引入vuerouter模块
import vue from 'vue'  //引入vue模块

vue.use(VueRouter) //使用VueRouter,使用其他第三方插件所要用到Vue.use()

const Home = () => import('../components/Home')  //懒加载引入页面
const HomeNews = () => import('../components/HomeNews') //懒加载引入Home下的嵌套路由
const HomeMessage = () => import('../components/HomeMessage') //懒加载引入Home下的嵌套路由

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')

const routes = [  //配置路由与组建的映射
  {
    path: '',
    redirect: '/home' //重定向
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    children: [  //定义子路由(嵌套路由)
      // {
      //   path: "",
      //   redirect: 'news'
      // },
      {
        path: 'news',  //不用写成'/news'
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
  },
  {
    path: '/user/:userId', //动态路由
    component: User,
    meta: {
      title: '用户'
    },
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },
  }
]
const router = new VueRouter({ //创建router实例
  routes,  //配置路由与组建的映射
  mode: 'history', //将hash模式设置为history模式
  linkActiveClass: 'active' //当前活跃路由的类名为active
})

router.beforeEach((to, from, next) => { //导航守卫
  document.title = to.matched[0].meta.title;
  console.log(to);
  next();
})

export default router

zzf2021/6/13大约 4 分钟

牛客小知识

vue小知识点问答(基础)

为什么data是个函数且返回一个对象

vue常见的修饰符有哪些？

组件间传值的方式有哪些？

不需要响应式的数据的处理方法？

对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

直接arr[index] = xxx无法更新视图怎么办？为什么？怎么办？

nextTick的用处？

子组件改变props里的数据会发生什么?