Vue.js学习笔记六computed属性的结果或被缓存，除非依赖的响应式属性变化才会重新计算。主要当做属性来使用 wa

事件监听

使用`keyup`进行文本框的监听

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>

<body>
    <div id="app">

        <!-- 分析: -->
        <!-- 1. 我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接出一个fullname -->
        <!-- 2. 如何监听到文本框数据的改变？? -->
        <input type="text" v-model="firstname" @keyup="getFullname"> +
        <input type="text" v-model="lastname" @keyup="getFullname"> =
        <input type="text" v-model="fullname">


    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstname: '',
                    lastname: '',
                    fullname: ''
                }
            },
            methods: {
                getFullname() {
                    this.fullname = this.firstname + '-' + this.lastname
                }
            }
        });
    </script>
</body>

</html>

使用`watch`属性来进行监听Vue实例中的数据改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>

<body>
    <div id="app">

        
        <input type="text" v-model="firstname"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname">


    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstname: '',
                    lastname: '',
                    fullname: ''
                }
            },
            methods: {
                getFullname() {
                    this.fullname = this.firstname + '-' + this.lastname
                }
            },
            watch: {//使用这个属性，可以监视data中指定数据的变化，然后出发这个watch中对应function处理函数
                firstname(newVal, oldVal){
                    // console.log("监视到了firstname的变化")
                    this.getFullname()
                    // console.log(newVal + '-----' + oldVal)
                },
                lastname(){
                    this.getFullname()
                }
            },
        });
    </script>
</body>

</html>

使用 `watch` 可以监听路由的改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
    <!-- 1. 安装vue-router路由模块 -->
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="login">登陆</router-link>
        <router-link to="register">注册</router-link>

        <router-view></router-view>
    </div>

    <script>

        let login = {
            template:'<h1>这是登录组件</h1>'
        }

        let register = {
            template:'<h1>这是注册组件</h1>'
        }

        const router = new VueRouter({
            routes:[
                {path:'/', component:login},
                {path:'/login', component:login},
                {path:'/register', component:register},
            ]
        })

        var vm=new Vue({
            el:'#app',
            data () {
                return{

                }
            },
            methods:{

            },
            router,
            watch: {
                // this.$router.path
                '$route.path'(newVal, oldVal){
                    // console.log(newVal + '-----' + oldVal)
                    if(newVal == '/login'){
                        console.log("欢迎进入登录页面")
                    }else if(newVal == '/register'){
                        console.log("欢迎进入注册页面")
                    }
                }
            },
        });
    </script>
</body>

</html>

使用`computed`计算属性来监听数据的值

计算属性：在computer中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候，是把他们的名称直接当做属性来使用的，并不会把计算属性当做方法来使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>

<body>
    <div id="app">

        
        <input type="text" v-model="firstname"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname">

        <p>{{fullname}}</p>
        <p>{{fullname}}</p>
        <p>{{fullname}}</p>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstname: '',
                    lastname: '',
                }
            },
            methods: {
                
            },
            computed: {
                'fullname'(){
                    console.log('ok')
                    return this.firstname + '-' + this.lastname
                }
            },
            
        });
    </script>
</body>

</html>

`computed`使用的一些注意事项

计算属性在引用的时候一定不要加（）去调用，直接把它当做普通属性去使用就好了
只要计算属性这个function内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个属性的值
计算属性的求值结果会被缓存起来，方便下次直接使用，如果计算属性方法中所依赖的任何数据都没有发生过变化，则不会重新对计算属性求值

`watch`、`computed`和`methods`之间的对比

computed属性的结果或被缓存，除非依赖的响应式属性变化才会重新计算。主要当做属性来使用
methods方法表示一个具体的操作，主要书写业务逻辑
watch一个对象，键是需要观察表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed与methods的结合体；

`nrm`的安装使用

作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始只是存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以再国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此这外，使用方式完全一样。

运行npm i nrm -g全局安装nrm包
使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址
使用nrm use npm或nrm user taobao切换不同的镜像源地址

注意：nrm只是单纯的提供了几个常用的下载包URL地址，并且能够让我们在这几个地址之间，很方便的切换，但是，我们每次安装包的时候，使用的装包工具，都是npm

Vue.js-Webpack

在网页中会引用哪些常见的静态资源？

JS
- .js .jsx .coffee .ts(TypeScript)
CSS
- .css .less .sass .scss
Images
- .jpg .png .gif .bmp .svg
字体文件(Fonts)
- .svg .ttf .eot .woff .woff2
模板文件
- .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

网页中引入的静态资源多了以后有什么问题？

网页加载速度慢，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系

如何解决上述两个问题？

合并、压缩、精灵图、图片的Base64编码
可以使用之前学过的requireJS、也可以使用webpack解决各个包之间的复杂依赖关系

什么是webpack？

webpack是前端的一个项目构建工具一

如何完美实现上述的2种解决方案

使用Gulp,基于task任务的。
使用Webpack,是基于整个项目进行构建的。

借助于Webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
根据官网的图片介绍Webpack打包的过程
Webpack官网

Webpack安装的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

使用webpack

首先我们需要在目录中创建一个main.js的项目入口文件，index.html中使用到的所有包和css样式到在这导入

// 这是main.js是我们项目的js入口文件

//1.导入Jquery
//import *** from *** 是ES6中导入模块的方式
//由于ES6的语法太高级了，浏览器解析不了，所以这一行执行会报错
import $ from 'jquery'

$(function(){
    $('li:odd').css('backgroundColor', 'yellow')
    $('li:even').css('backgroundColor', function(){
        return '#' + 'D97634'
    })
})

需要在创建一个webpack.config.js的配置对象，也可以在根目录下的终端中使用（webpack 要打包的文件的路径打包好的输出文件的路径）命令


const path = require('path')

//这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
    //在配置文件中，需要手动指定入口和出口
    entry: path.join(__dirname, './src/main.js'),//入口，表示要使用webpack打包哪个文件
    output:{
        path:path.join(__dirname, './dist'), //指定打包好的文件，输出到哪个目录中去
        filename:'bundle.js'    //这是指定输出的文件的名称
    }
}

当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步：

首先，webpack 发现我们并没有通过命令的形式，给它指定入口和出口
webpack就会去项目的根目录中，查找一个叫做webpack.config.js的配置文件
当找到配置文件之后，webpack就会去解析执行配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象
当webpack拿到了配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建

使用webpack-dev-server工具

因为我们在编写代码并保存之后，想要看到效果的话还需要在终端输入webpack来运行项目，每次都需要执行这种操作，显得太麻烦了，所以我们使用webpack-dev-server来进行自动的打包编译

首先我们需要运行npm i webpack-dev-server -D，把这个工具安装到项目的本地开发依赖
然后我们需要在package.json配置项的scripts中进行添加"dev":"webpack-dev-server"配置项
之后我们在终端中输入npm run dev命令来开启这个webpack-dev-server工具
最后我们需要把index导入的原文件进行修改

<!-- <script src="../dist/bundle.js"></script> -->
<script src="/bundle.js"></script>

注意
- 安装完毕后，这个工具的用法，和webpack命令的用法，完全一样
- 由于我们是在项目中本地安装的webpack-dev-server，所以无法把它当作脚本命令，在pawershell终端中直接运行（只有那些安装到全局-g的工具，才能在终端中正常运行）
- webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中必须本地安装webpack
- webpack-dev-server 帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上；而是直接托管到了电脑的内存中，所以我们在项目根目录，根本找不到这个打包好的bundle.js
- 我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咋们项目的根目录中，虽然我们看不到它，但是，可以认为，和idst src node_modules 平级，有一个看不见的文件，叫做bundle.js

`webpack-dev-server`在配置项中添加配置参数

--open：实现调用npm run dev后直接打开网页，不需要我们手动去打开
--port xxx：可以修改打开网页的端口
--contentBase src：可以用改打开后的默认页面，这里设置为scr目录下的index.html
--hot：热加载，可以实现局部更新代码，浏览器不需要刷新，内容改变

使用`html-webpack-plugin`插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐使用html-webpack-plugin插件配置启动页面。

运行npm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：

//导入处理路径的模块
const path = require('path')
//导入自动生成HTML文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: path.join(__dirname, './src/main.js'),//项目入口文件
    output: {//配置输出项
        path: path.join(__dirname, './dist'), //配置输出的路径
        filename: 'bundle.js'    //配置输出的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, './src/index.html'),//模板路径
            filename:'index.html'   //自动生成的HTML文件的名称
        })
    ]
}

修改package.json中script节点中的dev指令如下：

"dev":"webpack-dev-server"

将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中

webpack打包第三方样式文件

使用webpack打包css文件

运行npm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：

module:{//用来配置第三方loader模块的
    rules:[
        {test: /\.css$/, use:['style-loader', 'css-loader']}//处理css文件的规则
    ]
}

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

运行 npm i less-loader less -D
修改 webpack.config.js这个配置文件

{test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']}

使用webpack打包sass文件

运行 npm i sass-loader node-sass --save-dev
在 webpack.config.js中添加处理sass文件的loader模块：

{test: /\.sass$/, use:['style-loader', 'css-loader', 'sass-loader']}

webpack处理的第三方文件类型的过程

发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则
如果能找到对应的规则，就会调用对应的loader处理这种文件类型；
在调用loader的时候，是从后往前调用的；
当最后的一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去

Vue.js学习笔记六