Web前端最全vue-计算属性和监视属性，整理了3家面试问题：美团+字节+腾讯

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

方法二： 利用计算属性 computed ，实现

注意简写的时候，是只读属性，不能修改，也就是说不能实现setter功能

<div id="root">

    姓：<input type="text" v-model="firstName"><br /><br />

    名：<input type="text" v-model="lastName"><br /><br />

    全名：<span>{{fullname}}</span><br /><br />

</div>

Vue.config.productionTip = false

new Vue({

    el: '#root',

    data: {

        firstName: '张',

        lastName: '三'

    },

    computed: {

        //完整代码

        // fullname: {

        //     // get有什么作用？当有人读取fullastName时，get就会被调用，且返回值就作为fullastName的值

        //     //get什么时候调用？当初次读取fullname时，2】所依赖的数据发生变换时

        //     get() {

        //         console.log(this);

        //         return this.firstName + '-' + this.lastName

        //     },

        //     //set什么时候调用？当fullname被修改时

        //     set(value) {

        //         console.log('set', value)

        //         const arr = value.split('-')

        //         this.firstName = arr[0]

        //         this.lastName = arr[1]

        //     }

        // },

        //只读属性，简写方式

        fullname() {

            console.log(this);

            return this.firstName + '-' + this.lastName

        }

    }

})

对于两种方法：

以上方法可以通过已有属性，得到全名，直接用函数的方法和计算属性的方法区别：

• 函数------- 当data里面的数据发生变化的时候，fullname()会调用，如果当输入的内容一样的时候，同样也会调用fullname()函数，每一次都要执行的话，效率很低

• 计算属性---------计算属性内部是有缓存机制的：就是将计算出来的属性，缓存起来，当下一次计算的时候，如果缓存里面有该值，就直接拿来使用，就不用每次都来计算一边，大大的提高了效率，调试更方便

如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

监视属性 - watch

============

通过下面的实例来看看什么是监视属性

<div id="root">

    <h1>今天天气{{info}}</h1>

    <button @click='changeWheate'>切换天气</button>

</div>

<script>

    Vue.config.productionTip = false

    const vm = new Vue({

        el: '#root',

        data: {

            isHot: true

        },

        //计算属性

        computed: {

            info() {

                return this.isHot ? '很炎热' : '凉爽'

            }

        },

        //事件函数

        methods: {

            changeWheate() {

                this.isHot = !this.isHot

            }

        },

        //监视属性写法一

        watch: {

            isHot: {

                immediate: true,//初始化时让hander调用一次

                handler(newValue, oldValue) {

                    console.log('被修改了', newValue, oldValue);

                }

            }

        },

    })

    //监视属性写法二

    vm.$watch('isHot', {

        immediate: true,//初始化时让hander调用一次

        handler(newValue, oldValue) {

            console.log('被修改了', newValue, oldValue);

        }

    })

</script>

当监视属性isHot发生变化了，就会触发handler函数，执行里面的语句

我们知道Vue自身可以监视对象内部置的改变，但Vue提供的watch默认是不可以的

但是没关系：可以通过一种方法让watch能够深度监视

t通过添加deep:true可以让watch实现深度监视

const vm = new Vue({

        el: '#root',

        data: {

            isHot: true,

            numbers: {

                a: 1,

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。