vue学习笔记

1.vue 中关于MVVM的理解

• Model：vue中用于标识model的数据是data对象，data对象中的所有所有property加入到Vue的响应式系统中，由vue监听变化
• View：vue使用模板来实现展示，但是渲染时要结合vdom技术
• ViewModel：vue的核心，负责视图的响应，也就是数据双向绑定
  • 监听view中的数据，如果数据有变化，动态同步到data中
  • 监听data中的数据，如果数据有变化，通过vdom动态渲染视图
• 例代码如下：

// 这里是 view 层
<template>
    <div>
        <h3> 这里是view层 </h3>
    </div>
</template>

<script>
export default {
    name: 'example',
    // 这里是 model 层
    data() {
        return {
            hobby: 'ball',
        }
    },
}
</script>

<style scoped>

</style>

2.v-model的理解

通常情况下vue是单向的数据绑定，也就是通过model层来改变view层的数据 数据 ---> 视图
如果需要通过view层来修改model层的数据就需要使用v-model: 视图 ---> 数据

• 例代码如下：

<template>
    <div>
        // view 层显示 model 层提供的数据
        <h3> {{ addr }} </h3>

        // 通过 v-model 来修改 model 的数据（也就是此处可以修改 model 中的 addr 变量），实现数据的双向绑定
        <input v-model="addr" type="text">
    </div>
</template>

<script>
export default {
    name: 'example',
    data() {
        return {
            addr: '贵阳',
        }
    },
}
</script>

3.v-bind的理解

诞生来历：由于 data 中的变量不能直接作用于html的元素属性上，比如下列错误的代码

<template>
    // id 不能用 变量{{ name }}赋值
    <div id={{ name }}>
        {{ name }}
    </div>
</template>

作用：比如button有个disabled属性，用于控制当前按钮是否可以点击，我们可以使用v-bind来绑定data变量与元素属性

<template>
    <div>
        <button v-bind:disabled="undisplay">
            登录
        </button>
    </div>
</template>

<script>
    export default {
        name: 'example'
        data() {
            undisplay: false,
        },
    }
</script>

总结：由于 data 中的变量不能直接作用于html的元素属性上，我们可以使用v-bind来绑定data变量与元素属性。

4.元素事件

给button这个元素绑定一个点击事件：
v-on语法格式

v-on:eventName="eventHandler"
eventName: 事件名，比如click
eventHandler: 事件处理函数

简写： @click="clickButton"

实例代码：

<template>
    <div>
        // 通过v-on 为 button标签绑定一个点击事件
        <button :disabled="undisabled" v-on:click="clickButton">
            登录
        </button>
    </div>
</template>

<script>
    export default {
        name: 'example',
        data() {
            return {
                undisabled: false,
            }
        },
        methods: {
            clickButton() {
                alert("登录成功")
            }
        },
    }
</script>

5.计算属性

vue 支持直接在模板中直接使用js的表达式进行数据处理，例如

<template>
  <div>
    <h2>{{ msg1.split('').reverse().join('') }}</h2>
  <div>
</template>

<script>
  export default {
    name: 'example',
    data() {
      return {
        msg1: 'Hello Vue',
      }
    },
  }
</script>

缺点： 这种把数据处理逻辑嵌入视图中，不易于维护
改造为计算属性：

<template>
  <div>
    <h2>{{ revMsg }}</h2>
  </div>
</template>

<script>
  export default {
    name: 'example',
    data() {
      return {
        msg1: 'Hello Vue',
      }
    },
    computed: {
      revMsg: {
        return this.msg1.split('').reverse().join('')
      },
    },
  }
</script>

计算属性由两部分组成，get和set，分别用来获取计算属性和设置计算属性。
默认只有get，如果需要set，要自己添加

<template>
  <div>
    <h2>{{ revMsg }}</h2>
    <button v-bind:disabled="undisplay" @click="changeMsg">改变显示的字符</button>
  </div>
</template>

<script>
export default {
  name: "example",
  data() {
    return {
      undisplay: false,
      msg1: "Hello Vue",
      newMsg1: 'Yes, This is Vue.',
    }
  },
  methods: {
    changeMsg() {
      this.revMsg = this.newMsg1.split('').reverse().join('')
    },
  },
  computed: {
      revMsg: {
        get() {
          return this.msg1.split('').reverse().join('')
        },
        set(value) {
          this.msg1 = value.split('').reverse().join('')
        }
      }
  },
};
</script>

总结：
1.计算属性是用来存储数据，但具有以下几个特点：
　　a.数据可以进行逻辑处理操作。

　　b.对计算属性中的数据进行监视。

2.计算属性和普通属性的区别：

　　a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化

　　b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存计算的结果，不会多次执行。

6.webpack preload prefetch

preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源

prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源

在VUE SSR生成的页面中，首页的资源均使用preload，而路由对应的资源，则使用prefetch

<link rel="preload" href="./manifest.js" as="script">
<link rel="preload" href="./vendor.js" as="script">
<link rel="preload" href="./app.js" as="script">
<link rel="prefetch" href="./vendor-async.js">
<link rel="prefetch" href="./user.js">
<link rel="prefetch" href="./comment.js">
<link rel="prefetch" href="./category.js">
<link rel="prefetch" href="./post.js">
<link rel="prefetch" href="./home.js">

所以，对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch

【不要混用】
preload 和 prefetch 混用的话，并不会复用资源，而是会重复加载