Web前端最新Vue:计算属性与监视属性,前端framework面试

HTTP

  • HTTP 报文结构是怎样的?

  • HTTP有哪些请求方法?

  • GET 和 POST 有什么区别?

  • 如何理解 URI?

  • 如何理解 HTTP 状态码?

  • 简要概括一下 HTTP 的特点?HTTP 有哪些缺点?

  • 对 Accept 系列字段了解多少?

  • 对于定长和不定长的数据,HTTP 是怎么传输的?

  • HTTP 如何处理大文件的传输?

  • HTTP 中如何处理表单数据的提交?

  • HTTP1.1 如何解决 HTTP 的队头阻塞问题?

  • 对 Cookie 了解多少?

  • 如何理解 HTTP 代理?

  • 如何理解 HTTP 缓存及缓存代理?

  • 为什么产生代理缓存?

  • 源服务器的缓存控制

  • 客户端的缓存控制

  • 什么是跨域?浏览器如何拦截响应?如何解决?

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

</div>
new Vue({
    el:'#root',
    data:{
        fistName:'张',
        lastName:'三'
    },
    methods: {
        fullName(){
            return this.fistName + this.lastName;
        }
    },
})

3、通过计算属性


计算属性就是vue中的computed,这里面存放的是计算属性

而data中的是属性,两者不一样


    <div id="root">

        姓:<input type="text" v-model="fistName"><br><br>

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

        姓名:<span>{{fullName}}</span>

    </div>




const vm = new Vue({

        el:'#root',

        //属性

        data:{

            fistName:'张',

            lastName:'三'

        },

        // 计算属性

        computed:{

            fullName:{

                //当有人读取fullName时,get就会被调用,返回值为fullName的值

                //get调用时机

                //1、初次读取fullName

                //2、所依赖的数据变化时

                get(){

                    //这里的this是指vm

                    return this.fistName + this.lastName;

                },

                //当fullName被调用时候调用

                set(value){

                    const arr = value.split('-')

                    this.fistName = arr[0]

                    this.lastName = arr[1]

                }

            }

        }

    })



计算属性和方法的编写方式有点区别

  • {{}}中方法是写一个方法的,即带括号
  • 但是计算属性只需要写名字即可,不用带花括号

计算属性中要编写两个方法,一个是get方法,另一个是set方法

  • 当有人读取fullname这个计算属性,get方法就会被调用,返回值是fullname的值

  • 当有人修改fullname这个计算属性,set方法就会被调用

当明确只有get方法,不需要set方法的时候,计算属性可以简写成如下:


            fullName(){

                return this.fistName + this.lastName;

            }



get函数什么时候执行:

  • 初次读取时会执行一次
  • 当依赖的数据发生变化时会被调用一次

3.1、计算属性的优势

相对于方法来说,计算属性内部有缓存机制(复用),效率更好,调试更方便

简单来说,倘若计算属性不变,计算属性的数据就会存进缓存中,当页面上的其他数据需要读取这个计算属性的话,不再需要从vm获取,直接从缓存里面获取


二、监视属性

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

监视属性可以监视某个属性的变化,并且可以获取变化前和变化后的数值

通过关键词watch实现


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <script type="text/javascript" src="../js/vue.js"></script>

  </head>



  <body>

    <div id="root">

      <h2>今天天气很{{info}}</h2>

      <button @click="changgeWeather">切换天气</button>

    </div>

  </body>

  <script>

    Vue.config.productionTip = false;



    const vm = new Vue({

      el: "#root",

      data: {

        isHot: true,

      },

      computed: {

        info() {

          return this.isHot ? "炎热" : "凉爽";

        },

      },

      methods: {

        changgeWeather() {

          this.isHot = !this.isHot;

        },

      },

      // 监视

      //适用于一开始很明确地知道要监视谁

      watch: {

        isHot: {

          //初始化时让handler调用一下

          immediate: true,

          //什么时候调用?当isHost发生改变时

          handler(newValue, oldValue) {

            console.log("isHost被调用", newValue, oldValue);

          }

        },

      // }

    });



  </script>

</html>





例如如上案例,当isHost被修改的时候,监视属性中的isHost中的handler就会被调用

而 immediate: true 的作用是再初始化的时候调用一下这个监视属性

注意的是监视属性必须存在,才可以进行监视

除了以上邪恶写法,还可以通过vm.$watch监视


    vm.$watch("isHost", {

      //初始化时让handler调用一下

      immediate: true,

      //什么时候调用?当isHost发生改变时

      handler(newValue, oldValue) {

        console.log("isHost被调用", newValue, oldValue);

      },

    });



两种的使用场合不同:

  • 第一个则是,一开始就很明确这个属性需要监视,则写在vue里面

  • 第二个则是,一开始不知道这个属性需要被监视,然后后面加上的,就可以用vm.$watch

当监视属性只有handler的时候,可以进行简写


watch: {


### 基础学习:

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计:HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/d61cc6abe950a785d1cff6e905f3a526.webp?x-oss-process=image/format,png)


CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

![](https://img-blog.csdnimg.cn/img_convert/5509dcba4720fea4e9271611b4953bef.webp?x-oss-process=image/format,png)


##### 动态交互:JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

![](https://img-blog.csdnimg.cn/img_convert/d1e2fee983a836a29b7c097ada051a88.webp?x-oss-process=image/format,png)

浏览的信息,可以包含文字、图片、视频等。

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-kSLcdlzg-1715202811917)]


CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中...(img-8PqF284d-1715202811918)]


##### 动态交互:JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

[外链图片转存中...(img-KN3xAeTL-1715202811918)]

  • 14
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值