vue3+typescript【3】

上节问题解答

watch进行深度侦听时，由于对象是引用类型，会指向同一个地址，即新旧值相同。如果要获取旧值可以进行拷贝，又分为深拷贝和浅拷贝。

• 浅拷贝

const info = {
      name: 'why',
      age: 18,
      friend: {
        name: 'friend',
        age: 20
      }
    }
    const obj = Object.assign({}, info);

注意，friend也为对象类型，指向的是一个地址，拷贝数据或原数据任一改变，值都会改变

• 深拷贝

const info = {
      name: 'why',
      age: 18,
      friend: {
        name: 'friend',
        age: 20
      }
    }
    const obj = JSON.parse(JSON.stringify(info));

深拷贝改变拷贝数据，即使是对象类型，也不会对原数据造成影响，即它会给原对象类型创建一个新的地址

• lodash库
  • 浅拷贝

    const obj = _.clone(info)
    

  • 深拷贝

    const obj = _.cloneDeep(info)
    

vue3的表单

v-model的基本使用

• v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
• 它会根据控件类型自动选取正确的方法来更新元素；
• v-model 本质上是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理

v-model的修饰符

lazy

如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发
如<input type="text" v-model.lazy="message">

number

• v-model赋值的时候总是string类型
• 如果希望转化为数字类型，可以使用number
  如<input type="text" v-model.number="score">
• 在进行逻辑判断时，如果是一个string类型，在可以转化的情况下会进行隐式转换的

trim

如果要自动过滤用户输入的首位空白字符，可以给v-model添加 trim 修饰符
<input type="text" v-model.trim="message">

webpack打包

webpack的定义

• webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；
• 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
• 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
• 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
• 现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

webpack的安装

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

创建局部的webpack

• 第一步：创建package.json文件，用于管理项目的信息、库依赖等
  npm init
• 第二步：安装局部的webpack
  npm install webpack webpack-cli -D
  • 此时形成node_modules文件
• 第三步：使用局部的webpack
  npx webpack
  • 事实上，当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入
  • 所以，如果当前项目中没有存在src/index.js文件，那么会报错；
• 第四步：在package.json中创建scripts脚本，执行脚本打包即可
  npm run build

webpack配置文件

在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件

const path = require('path');
module.exports={
    entry:"./src/main.js",
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"./dist")
    }
}

如果配置文件不是webpack.config.js
可以手动指定配置文件,例如下面的wk.config.js
则在文件package.json指定配置文件

"scripts": {
    "build":"webpack --config wk.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

loader

npm install css-loader -D

npm install style-loader -D

less工具处理：
npm install less -D
执行命令npx lessc ./src/css/title.less title.css
自动转换less为css
npm install less-loader -D

loader配置方式

• 配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：
  • module.rules中允许我们配置多个loader

module.rules的配置如下：

• rules属性对应的值是一个数组：[Rule]
• 数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：
  • test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
  • use属性：对应的值时一个数组：[UseEntry]
    • UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
      • loader：必须有一个 loader属性，对应的值是一个字符串；
      • options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
      • query：目前已经使用options来替代；
    • 传递字符串（如：use: [ ‘style-loader’ ]）是 loader 属性的简写方式（如：use: [ { loader: ‘style-loader’} ]）；
  • loader属性： Rule.use: [ { loader } ] 的简写

loader的配置代码:

const path = require('path');
module.exports={
    mode:"development",
    entry:"./src/main.js",
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"./dist")
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                // loader:"css-loader" //写法一
                // use:["css-loader"] //写法二
                // 写法三
                use:[
                    {loader:"css-loader"}
                ]
            }
        ]
    }
}

postcss

postcss工具
npm install postcss postcss-cli -D
可以在此网站查询一些添加css属性的样式(主要是带’:'的前缀)
https://autoprefixer.github.io
又因为需要添加前缀，所以要安装autoprefixer
npm install autoprefixer -D
直接使用postcss工具，并且指定使用autoprefixer
npx postcss --use autoprefixer -o end.css ./src/css/style.css
此时的前缀主要是指-webkit-user-select,-moz-user-select,-ms-user-select
因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin

{
    loader:"postcss-loader",
    options:{
        postcssOptions:{
            plugins:[
                require('autoprefixer')
            ]
        }
    }
}

postcss-preset-env插件，会自动添加autoprefixer
npm install postcss-preset-env -D,之后修改
plugins:[require('autoprefixer')]